/* Qwoter Design System — Tokens
 * Values verified against the Qwoter 4-26 Figma redesign.
 */

:root {
  /* ------------------------------------------------------------------ */
  /* Color — Surfaces                                                   */
  /* ------------------------------------------------------------------ */
  --color-surface:                 #ffffff;
  --color-surface-subtle:          #f3f4f6;
  --color-surface-muted:           #e7e8ea;
  --color-surface-inverse:         #000000;       /* Figma cards use pure black */
  --color-surface-inverse-subtle:  #050505;
  --color-surface-inverse-raised:  #141414;

  /* ------------------------------------------------------------------ */
  /* Color — Text                                                       */
  /* ------------------------------------------------------------------ */
  --color-text:                    #121212;       /* Figma heading color */
  --color-text-muted:              #666666;       /* Figma body on light */
  --color-text-subtle:             #787878;       /* Figma eyebrow */
  --color-text-inverse:            #ffffff;
  --color-text-inverse-muted:      #c6c6c6;       /* Figma body in dark step cards */
  --color-text-inverse-subtle:     #adadad;       /* Figma body in dark pillars */

  /* ------------------------------------------------------------------ */
  /* Color — Brand / Accent                                             */
  /* ------------------------------------------------------------------ */
  --color-accent:                  #00a118;       /* Logo / dot green */
  --color-accent-button:           #007c13;       /* Button green (darker for AA) */
  --color-accent-button-hover:     #006510;
  --color-accent-soft:             #e6f5ea;
  --color-accent-ink:              #ffffff;
  --color-coming-soon:             #f0ad00;       /* Amber for "coming soon" dots */
  --color-coming-soon-text:        #7a7a7a;       /* Coming-soon title gray */

  /* ------------------------------------------------------------------ */
  /* Color — Border                                                     */
  /* ------------------------------------------------------------------ */
  --color-border:                  #e6e6e1;       /* Off-white card border */
  --color-border-strong:           #c9ced7;
  --color-border-dashed:           #afafaf;       /* Coming-soon dashed */
  --color-border-inverse:          #1f1f1f;
  --color-border-inverse-strong:   #2d2d2d;

  /* ------------------------------------------------------------------ */
  /* Typography                                                         */
  /* ------------------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Font sizes — Figma uses 13 / 14 / 18 / 24 / 32 / 48 */
  --text-eyebrow:   0.875rem;   /* 14 — Figma eyebrow */
  --text-xs:        0.8125rem;  /* 13 — buttons, indices */
  --text-sm:        0.875rem;   /* 14 — body */
  --text-base:      1rem;       /* 16 */
  --text-lg:        1.125rem;   /* 18 — italic "(coming soon)" */
  --text-xl:        1.375rem;   /* 22 */
  --text-2xl:       1.5rem;     /* 24 — platform/step titles */
  --text-3xl:       2rem;       /* 32 — pillar titles */
  --text-4xl:       3rem;       /* 48 — H1, CTA */
  --text-5xl:       4rem;       /* 64 */
  --text-display:   5rem;       /* 80 — Hero display */

  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --leading-tight:   0.85;
  --leading-snug:    1.06;        /* Figma pillar title 34/32 */
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;         /* Figma body */
  --leading-cta:     1.1;         /* Figma CTA title */

  --tracking-tighter: -0.05em;    /* H1 / CTA / pillar */
  --tracking-tight:   -0.02em;    /* Card titles / 24px */
  --tracking-normal:  0;
  --tracking-wide:    0.08em;     /* "01" 1.04/13 */
  --tracking-widest:  0.12em;     /* Eyebrow 1.68/14 */

  /* ------------------------------------------------------------------ */
  /* Spacing — 4px base                                                 */
  /* ------------------------------------------------------------------ */
  --space-0:   0;
  --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 — card padding */
  --space-7:   1.75rem;   /* 28 */
  --space-8:   2rem;      /* 32 — pillar / step top padding */
  --space-9:   2.25rem;   /* 36 — pillar / step bottom padding */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 — section vertical gaps */
  --space-14:  3.5rem;    /* 56 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */

  /* ------------------------------------------------------------------ */
  /* Radii                                                              */
  /* ------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;     /* buttons */
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------ */
  /* Shadows                                                            */
  /* ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 11, 11, 0.08);
  --shadow-lg: 0 16px 40px rgba(11, 11, 11, 0.12);

  /* ------------------------------------------------------------------ */
  /* Layout                                                             */
  /* ------------------------------------------------------------------ */
  --container-max:           1440px;
  --container-gutter:        3rem;    /*  48 */
  --container-gutter-wide:   5rem;    /*  80 */

  /* ------------------------------------------------------------------ */
  /* Motion                                                             */
  /* ------------------------------------------------------------------ */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);

  /* ------------------------------------------------------------------ */
  /* Focus ring                                                         */
  /* ------------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent);
}