/* CREATICS · Design tokens (colores, tipografía, espaciado, efectos, motion)
   Importar ANTES de creatics.css. Fuente: design system Crea 26. */

/* ==========================================================================
   CREATICS · Color tokens
   Palette sourced from the brand marks + creatics.fun:
     blue #3d4c8f · magenta "punto" #d9006c · neon turquoise #00f5d4
     mint #7fffdf · yellow #ffcd35
   Tints/shades harmonised in oklch space. Semantic aliases below.
   ========================================================================== */
:root {
  /* ---- Raw brand seeds ---- */
  --cs-blue: #3d4c8f;
  --cs-pink: #d9006c;
  --cs-turquoise: #00f5d4;
  --cs-mint: #7fffdf;
  --cs-yellow: #ffcd35;
  --cs-ink: #0e1020;
  --cs-white: #ffffff;

  /* ---- Blue (primary / indigo) ---- */
  --blue-50:  #eef0f9;
  --blue-100: #dde1f1;
  --blue-200: #bcc3e3;
  --blue-300: #939ecf;
  --blue-400: #6b78b6;
  --blue-500: #4f5da0;
  --blue-600: #3d4c8f;   /* BRAND */
  --blue-700: #333f76;
  --blue-800: #29325b;
  --blue-900: #1d2344;
  --blue-950: #12162c;

  /* ---- Magenta (accent · the "punto") ---- */
  --pink-50:  #ffe7f2;
  --pink-100: #ffcfe3;
  --pink-200: #ffa0c8;
  --pink-300: #fb63a4;
  --pink-400: #ef2f86;
  --pink-500: #d9006c;   /* BRAND */
  --pink-600: #b5005a;
  --pink-700: #8d0047;
  --pink-800: #660034;

  /* ---- Turquoise (highlight · AI / tech signal) ---- */
  --turquoise-100: #d5fff8;
  --turquoise-200: #a6fff0;
  --turquoise-300: #5cfce4;
  --turquoise-400: #00f5d4;  /* BRAND */
  --turquoise-500: #04d3b8;
  --turquoise-600: #06a992;  /* legible teal for text-on-light */
  --turquoise-700: #0a7d6d;

  /* ---- Mint & Yellow (play / warmth) ---- */
  --mint-200: #cfffef;
  --mint-300: #7fffdf;      /* BRAND */
  --yellow-100: #fff4d1;
  --yellow-200: #ffe490;
  --yellow-300: #ffcd35;    /* BRAND */
  --yellow-400: #f5b800;
  --yellow-500: #d99b00;    /* legible amber for text-on-light */

  /* ---- Neutrals (cool-warm grey, faintly indigo-tinted) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8fb;
  --neutral-100: #eef0f5;
  --neutral-200: #e2e5ee;
  --neutral-300: #cdd2df;
  --neutral-400: #a4abbf;
  --neutral-500: #767e96;
  --neutral-600: #565d74;
  --neutral-700: #3c4256;
  --neutral-800: #262a39;
  --neutral-900: #171925;
  --neutral-950: #0e1020;

  /* ---- Support semantic hues ---- */
  --success: #06a992;
  --warning: #f5b800;
  --danger:  #e0356b;
  --info:    #4f5da0;

  /* =========================================================
     Semantic aliases — reference THESE in components
     ========================================================= */
  --color-bg:            var(--neutral-50);
  --color-bg-deep:       var(--blue-950);
  --color-surface:       var(--neutral-0);
  --color-surface-alt:   var(--neutral-100);
  --color-surface-sunken:var(--neutral-100);

  --color-ink:           var(--neutral-950);
  --color-ink-soft:      var(--neutral-700);
  --color-ink-mute:      var(--neutral-500);
  --color-ink-invert:    var(--neutral-0);

  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-ink:    var(--cs-ink);

  --color-primary:       var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-press: var(--blue-800);
  --color-on-primary:    var(--neutral-0);
  --color-primary-tint:  var(--blue-50);

  --color-accent:        var(--pink-500);      /* magenta */
  --color-accent-hover:  var(--pink-600);
  --color-on-accent:     var(--neutral-0);
  --color-accent-tint:   var(--pink-50);

  --color-highlight:     var(--turquoise-400); /* neon turquoise */
  --color-highlight-ink: var(--turquoise-600);
  --color-highlight-tint:var(--turquoise-100);

  --color-play:          var(--yellow-300);    /* yellow */
  --color-play-ink:      var(--yellow-500);
  --color-play-tint:     var(--yellow-100);

  --color-link:          var(--blue-600);
  --color-link-hover:    var(--pink-500);

  --color-focus:         var(--turquoise-400);
  --color-selection:     var(--turquoise-200);
}

/* ==========================================================================
   CREATICS · Typography tokens
   Display  = CREATICS (custom, all-caps geometric) — wordmark & big statements
   Heading  = Space Grotesk — techy geometric
   Body/UI  = Manrope — warm, legible
   Mono     = Space Mono — the "</>" code motif
   ========================================================================== */
:root {
  --font-display: 'CREATICS', 'Space Grotesk', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', 'CREATICS', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Type scale (fixed, rem-based on 16px root) ---- */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.125rem;   /* 18 */
  --text-lg:  1.25rem;    /* 20 */
  --text-xl:  1.5rem;     /* 24 */
  --text-2xl: 1.875rem;   /* 30 */
  --text-3xl: 2.375rem;   /* 38 */
  --text-4xl: 3rem;       /* 48 */
  --text-5xl: 3.875rem;   /* 62 */
  --text-6xl: 5rem;       /* 80 */

  /* ---- Fluid display sizes (hero / manifesto) ---- */
  --display-sm: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);  /* @kind other */
  --display-md: clamp(2.75rem, 1.4rem + 5.4vw, 5rem);    /* @kind other */
  --display-lg: clamp(3.25rem, 1rem + 9vw, 7rem);        /* @kind other */

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;   /* all-caps kickers */
  --tracking-widest:  0.24em;

  /* ---- Role tokens ---- */
  --type-kicker-tracking: var(--tracking-wider);
  --type-body-size:   var(--text-base);
  --type-body-leading:var(--leading-relaxed);
}

/* ==========================================================================
   CREATICS · Spacing & sizing (4px base grid)
   ========================================================================== */
:root {
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-7:  2rem;     /* 32 */
  --space-8:  2.5rem;   /* 40 */
  --space-9:  3rem;     /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-11: 5rem;     /* 80 */
  --space-12: 6rem;     /* 96 */
  --space-13: 8rem;     /* 128 */
  --space-14: 10rem;    /* 160 */

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);   /* @kind spacing */
  --section-y: clamp(4rem, 2rem + 6vw, 8rem);     /* @kind spacing */
}

/* ==========================================================================
   CREATICS · Radius, borders, shadows & glows
   Crisp & geometric (echoing the squared wordmark), with a signature
   "hard offset" shadow for the bold/playful side and a turquoise neon
   glow for the AI/tech signal.
   ========================================================================== */
:root {
  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Border widths ---- */
  --border-thin: 1px;
  --border: 1.5px;
  --border-bold: 2.5px;   /* the confident, drawn outline */

  /* ---- Elevation (indigo-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(18,22,44,0.08);
  --shadow-sm: 0 2px 8px rgba(18,22,44,0.10);
  --shadow-md: 0 10px 26px -8px rgba(18,22,44,0.18);
  --shadow-lg: 0 22px 50px -14px rgba(18,22,44,0.24);
  --shadow-xl: 0 34px 74px -22px rgba(18,22,44,0.30);

  /* ---- Signature hard offset (playful / editorial) ---- */
  --shadow-offset:      5px 5px 0 0 var(--cs-ink);
  --shadow-offset-blue: 5px 5px 0 0 var(--blue-600);
  --shadow-offset-pink: 5px 5px 0 0 var(--pink-500);

  /* ---- Neon glows ---- */
  --glow-turquoise: 0 0 24px rgba(0,245,212,0.55), 0 0 6px rgba(0,245,212,0.9);
  --glow-pink:      0 0 22px rgba(217,0,108,0.45);
  --glow-yellow:    0 0 22px rgba(255,205,53,0.5);

  /* ---- Focus ring ---- */
  --ring-width: 3px;
  --ring: 0 0 0 var(--ring-width) rgba(0,245,212,0.7);
  --ring-offset: 0 0 0 2px var(--color-surface), 0 0 0 5px rgba(0,245,212,0.7);
}

/* ==========================================================================
   CREATICS · Motion
   Confident, springy easing (matches the bold, playful tone). Fades + small
   lifts; a bounce curve for delight moments. Respect reduced-motion.
   ========================================================================== */
:root {
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast: 130ms;    /* @kind other */
  --dur: 220ms;         /* @kind other */
  --dur-slow: 380ms;    /* @kind other */
  --dur-slower: 640ms;  /* @kind other */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.5, 1.4, 0.6, 1);    /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms;    /* @kind other */
    --dur: 0ms;         /* @kind other */
    --dur-slow: 0ms;    /* @kind other */
    --dur-slower: 0ms;  /* @kind other */
  }
}