/* ==========================================================================
   SCAPE GAMING — Design tokens
   Generated from Figma: "Scape Design System" (pOj6CN30IXxdEkZBTHmLN0)

   Variable names mirror the Figma paths 1:1, so a re-sync is mechanical:
     Figma  color/brand/default   ->  CSS  --color-brand-default
     Figma  spacing/component/md  ->  CSS  --spacing-component-md
     Figma  button/primary/...    ->  CSS  --button-primary-...

   Collections mapped:
     Color (primitives) · Semantic · Spacing · Border Radius · Typography ·
     Component Tokens
   Modes: Desktop is the default; Mobile mode is applied under 768px.
   ========================================================================== */

:root {
  /* ======================================================================
     PRIMITIVES  —  collection "Color"
     Only the ramps the marketing surface uses are inlined here.
     ====================================================================== */

  --neutral-0:    #ffffff;
  --neutral-50:   #f9fafb;
  --neutral-100:  #f3f4f6;
  --neutral-200:  #e5e7eb;
  --neutral-300:  #d1d5db;
  --neutral-400:  #9ca3af;
  --neutral-500:  #6b7280;
  --neutral-600:  #4b5563;
  --neutral-700:  #374151;
  --neutral-800:  #1f2937;
  --neutral-900:  #111827;
  --neutral-950:  #030712;
  --neutral-1000: #000000;

  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --yellow-950: #422006;

  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-900: #14532d;
  --amber-400: #fbbf24;
  --amber-700: #b45309;
  --amber-900: #78350f;
  --red-400:   #f87171;
  --red-500:   #ef4444;
  --red-900:   #7f1d1d;
  --blue-400:  #60a5fa;
  --blue-500:  #3b82f6;
  --blue-700:  #1d4ed8;
  --blue-900:  #1e3a8a;
  --purple-500: #a855f7;
  --purple-600: #9333ea;

  /* ======================================================================
     SEMANTIC  —  collection "Semantic", mode "Mode 1"
     This is the brand override point. A second brand replaces only this block.
     ====================================================================== */

  /* background */
  --color-background-default: #030712;
  --color-background-subtle:  #111827;
  --color-background-muted:   #1f2937;
  --color-background-inverse: #f9fafb;

  /* surface */
  --color-surface-default: #111827;
  --color-surface-raised:  #1f2937;
  --color-surface-overlay: #1f2937;
  --color-surface-sunken:  #030712;
  --color-surface-opacity: #111827e5;

  /* border */
  --color-border-default: #374151;
  --color-border-strong:  #4b5563;
  --color-border-subtle:  #1f2937;
  --color-border-inverse: #e5e7eb;

  /* text */
  --color-text-primary:    #f9fafb;
  --color-text-secondary:  #9ca3af;
  --color-text-tertiary:   #6b7280;
  --color-text-disabled:   #374151;
  --color-text-inverse:    #111827;
  --color-text-on-brand:   #030712;
  --color-text-link:       #facc15;
  --color-text-link-hover: #fde047;

  /* icon */
  --color-icon-default:  #ffffff;
  --color-icon-subtle:   #6b7280;
  --color-icon-on-brand: #030712;
  --color-icon-surface:  #eab3081a;

  /* brand */
  --color-brand-default:  #facc15;
  --color-brand-hover:    #fde047;
  --color-brand-active:   #fef08a;
  --color-brand-subtle:   #422006;
  --color-brand-muted:    #854d0e;
  --color-brand-text:     #facc15;
  --color-brand-border:   #a16207;
  --color-brand-emphasis: #eab308;
  --color-brand-light:    #fef9c3;
  --color-brand-deep:     #422006;

  /* brand alpha */
  --color-brand-alpha-a5:  #eab3080d;
  --color-brand-alpha-a10: #eab3081a;
  --color-brand-alpha-a20: #eab30833;
  --color-brand-alpha-a30: #eab3084d;
  --color-brand-alpha-a50: #eab30880;

  /* feedback */
  --color-feedback-success-background: #14532d;
  --color-feedback-success-border:     #22c55e;
  --color-feedback-success-text:       #4ade80;
  --color-feedback-success-solid:      #22c55e;

  --color-feedback-warning-background: #78350f;
  --color-feedback-warning-border:     #b45309;
  --color-feedback-warning-text:       #fbbf24;
  --color-feedback-warning-solid:      #fbbf24;

  --color-feedback-error-background: #7f1d1d;
  --color-feedback-error-border:     #ef4444;
  --color-feedback-error-text:       #f87171;
  --color-feedback-error-solid:      #ef4444;

  --color-feedback-info-background: #1e3a8a;
  --color-feedback-info-border:     #1d4ed8;
  --color-feedback-info-text:       #60a5fa;
  --color-feedback-info-solid:      #3b82f6;

  /* overlay + state */
  --color-overlay-dark-a50:  #11182780;
  --color-overlay-dark-a80:  #111827cc;
  --color-overlay-dark-a90:  #111827e5;
  --color-overlay-light-a5:  #ffffff0d;
  --color-overlay-light-a10: #ffffff1a;
  --color-overlay-light-a20: #ffffff33;
  --color-overlay-light-a50: #ffffff80;

  --color-state-hover-on-dark:   #ffffff1a;
  --color-state-pressed-on-dark: #ffffff33;
  --color-state-focus-brand:     #3b82f633;

  --color-transparent: #00000000;

  /* secondary / tertiary families */
  --color-secondary-default: #6b7280;
  --color-secondary-text:    #d1d5db;
  --color-secondary-border:  #374151;

  /* accent */
  --color-accent-purple:            #a855f7;
  --color-accent-purple-alpha-a20:  #a855f733;

  /* ======================================================================
     SPACING  —  collection "Spacing", mode "Desktop"
     ====================================================================== */

  --space-0:  0px;
  --space-1:  2px;    /* Figma: 1-1 */
  --space-2:  4px;    /* Figma: 1-2 */
  --space-3:  8px;    /* Figma: 2   */
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  28px;
  --space-9:  32px;
  --space-10: 36px;
  --space-11: 40px;
  --space-12: 48px;
  --space-13: 56px;
  --space-14: 64px;
  --space-15: 80px;
  --space-16: 96px;
  --space-17: 112px;
  --space-18: 128px;
  --space-19: 160px;
  --space-20: 192px;
  --space-21: 256px;

  /* semantic spacing */
  --spacing-component-3xs: 2px;
  --spacing-component-2xs: 4px;
  --spacing-component-xs:  8px;
  --spacing-component-sm:  12px;
  --spacing-component-md:  16px;
  --spacing-component-lg:  24px;

  /* The page gutter: the inset from the left and right edges of the screen.
     Its own token because it is the one horizontal value that has to change
     on a phone independently of the rest of the 24px component spacing. */
  --page-gutter: 24px;
  --spacing-component-xl:  32px;
  --spacing-component-2xl: 48px;

  --spacing-layout-xs:  32px;
  --spacing-layout-sm:  48px;
  --spacing-layout-md:  64px;
  --spacing-layout-lg:  96px;
  --spacing-layout-xl:  160px;
  --spacing-layout-2xl: 256px;

  /* ======================================================================
     BORDER RADIUS  —  collection "Border Radius", mode "Desktop"
     ====================================================================== */

  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ======================================================================
     TYPOGRAPHY  —  collection "Typography", mode "Desktop"
     ====================================================================== */

  --font-family-heading: "Oswald", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-family-body:    "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-2xs: 10px;
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;

  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-none:    1;
  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:   2;

  --letter-spacing-tighter: -0.8px;
  --letter-spacing-tight:   -0.4px;
  --letter-spacing-normal:  0px;
  --letter-spacing-wide:    0.4px;
  --letter-spacing-wider:   0.8px;
  --letter-spacing-widest:  1.6px;

  /* ======================================================================
     COMPONENT TOKENS  —  collection "Component Tokens", mode "Default"
     ====================================================================== */

  /* button / primary — gradient pill with a 2px "depth" plate under it */
  --button-primary-default-gradient-start: #fde047;
  --button-primary-default-gradient-end:   #eab308;
  --button-primary-hover-gradient-start:   #fef08a;
  --button-primary-hover-gradient-end:     #facc15;
  --button-primary-clicked-gradient-start: #eab308;
  --button-primary-clicked-gradient-end:   #fde047;
  --button-primary-disabled-gradient-start:#854d0e;
  --button-primary-disabled-gradient-end:  #422006;
  --button-primary-default-text:  #030712;
  --button-primary-default-drop:  #422006;
  --button-primary-disabled-text: #ffffff80;

  /* button / secondary — solid white pill */
  --button-secondary-default-surface: #ffffff;
  --button-secondary-hover-surface:   #e5e7eb;
  --button-secondary-clicked-surface: #d1d5db;
  --button-secondary-default-text:    #111827;
  --button-secondary-default-drop:    #d1d5db;

  /* button / tertiary — translucent with hairline */
  --button-tertiary-default-surface: #ffffff0d;
  --button-tertiary-hover-surface:   #ffffff1a;
  --button-tertiary-clicked-surface: #ffffff33;
  --button-tertiary-default-stroke:  #ffffff80;
  --button-tertiary-default-text:    #f9fafb;
  --button-tertiary-default-drop:    #374151;

  /* ----------------------------------------------------------------------
     input / select / checkbox
     Authored from tokens/component-tokens.yaml (sections 03, 04, 05) rather
     than synced from Figma — the Component Tokens collection does not carry
     these yet, so they need adding there before the next sync overwrites this
     file.

     Four values deviate from the spec's semantic mapping. Each is a contrast
     failure of that mapping on the dark theme, measured against the page
     ground #030712 and the field fill #111827, and each is marked DEVIATES:

       border.color.default   border.default  #374151   1.95 vs page  (need 3)
       border.color.hover     border.strong   #4b5563   2.66 vs page  (need 3)
       placeholder.color      text.disabled   #374151   1.72 on fill  (need 4.5)
       checkbox border        border.default  #374151   1.95 vs page  (need 3)

     These are worth fixing upstream: any dark-theme form built from the
     system will inherit the same problem.
     ---------------------------------------------------------------------- */

  /* input / size — Figma: Fields, Size=Large|Medium|Small */
  --input-lg-height:    56px;
  --input-md-height:    48px;
  --input-sm-height:    42px;
  --input-lg-padding-x: 20px;
  --input-radius:       9999px;   /* full */

  /* input / container */
  --input-container-bg-default:  #111827;   /* field/default/surface */
  --input-container-bg-disabled: #1f2937;   /* color/background/muted */

  /* input / border */
  --input-border-width-default: 1px;
  --input-border-width-focus:   1px;
  --input-border-default:  #374151;   /* color/border/default */
  --input-border-hover:    #facc15;   /* field/hover — the whole field warms  */
  --input-border-focus:    #facc15;   /* color/brand/default */
  --input-border-error:    #ef4444;   /* color/feedback/error/border */
  --input-border-success:  #22c55e;   /* color/feedback/success/border */
  --input-border-disabled: #1f2937;   /* color/border/subtle */

  /* input / label — the small line that sits inside the field */
  --input-label-size:    12px;        /* Label 2: Oswald medium 12/1.25 */
  --input-label-default: #9ca3af;     /* color/text/secondary */
  --input-label-focus:   #facc15;
  --input-label-error:   #ef4444;
  --input-label-success: #22c55e;

  /* input / value and resting placeholder */
  --input-value-size:    14px;        /* Body 2: satoshi 14/1.5 */
  --input-text-default:  #f9fafb;     /* color/text/primary */
  --input-text-disabled: #374151;     /* color/text/disabled */
  --input-placeholder-size:  16px;    /* Placeholder 1: Oswald 16/1.5 */
  --input-placeholder:   #6b7280;     /* color/text/tertiary */

  /* input / icon slots */
  --input-icon-default: #374151;
  --input-icon-hover:   #facc15;
  --input-icon-focus:   #facc15;
  --input-icon-error:   #ef4444;
  --input-icon-success: #22c55e;

  /* input / focus ring */
  --input-focus-ring-color: #3b82f633;
  --input-focus-ring-width: 3px;

  /* select / trigger — same shell as input plus the chevron */
  --select-chevron: #9ca3af;

  /* checkbox — Figma: Checkbox, State=Default|Hovered|Filled|Errored|Disabled */
  --checkbox-size-lg:        20px;
  --checkbox-radius:         4px;    /* sm */
  --checkbox-gap:            4px;    /* spacing/component/2xs */
  --checkbox-bg-unchecked:   #111827;   /* color/surface/default */
  --checkbox-bg-checked:     #facc15;   /* color/brand/default */
  --checkbox-bg-disabled:    #1f2937;
  --checkbox-border-unchecked: #374151; /* color/border/default */
  --checkbox-border-hover:     #facc15;
  --checkbox-border-checked:   #facc15;
  --checkbox-border-error:     #ef4444;
  --checkbox-border-disabled:  #1f2937;
  --checkbox-icon:             #030712; /* color/icon/on-brand */
  --checkbox-label-text:       #f9fafb; /* color/text/primary */
  --checkbox-label-error:      #ef4444;
  --checkbox-label-size:       14px;    /* Label 1: Oswald medium 14/1.25 */
  /* the shared "brand-effects" plate: lit from above, shadowed below, lifted */
  --checkbox-depth:
    inset 0 2px 4px rgba(255, 255, 255, 0.30),
    inset 0 -2px 2px rgba(0, 0, 0, 0.25),
    0 8px 12px rgba(0, 0, 0, 0.20);

  /* button / ghost — brand text only */
  --button-ghost-default-text:    #facc15;
  --button-ghost-hover-surface:   #eab3081a;
  --button-ghost-clicked-surface: #eab30833;

  /* button geometry (from the Figma component: surface height / padding-x) */
  --button-height-sm: 34px;
  --button-height-md: 44px;
  --button-height-lg: 50px;
  --button-padding-x-sm: 16px;
  --button-padding-x-md: 20px;
  --button-padding-x-lg: 24px;
  --button-gap-sm: 2px;
  --button-gap-md: 8px;
  --button-font-size-sm: 14px;
  --button-font-size-md: 16px;
  --button-radius: 9999px;
  --button-depth: 2px;

  /* top navigation */
  --top-navigation-default-surface: #111827;
  --top-navigation-default-stroke:  #1f2937;
  --top-navigation-default-text:    #f9fafb;

  /* labels (chips) */
  --label-brand-subtle-surface: #422006;
  --label-brand-subtle-text:    #facc15;
  --label-purple-filled-surface: #9333ea;
  --label-purple-filled-text:    #ffffff;

  /* ======================================================================
     NON-FIGMA: motion + layout primitives the web surface needs
     ====================================================================== */

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  --width-content: 1320px;
  --width-prose: 64ch;
  --header-height: 72px;
}

/* ==========================================================================
   MOBILE MODE
   Figma ships Mobile modes for Spacing, Typography and Border Radius.
   Same variable names, remapped values — nothing downstream changes.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    /* Spacing — mode "Mobile" */
    --space-5:  16px;
    --space-6:  20px;
    --space-7:  24px;
    --space-8:  24px;
    --space-9:  28px;
    --space-10: 32px;
    --space-11: 32px;
    --space-12: 40px;
    --space-13: 48px;
    --space-14: 48px;
    --space-15: 64px;
    --space-16: 72px;
    --space-17: 80px;
    --space-18: 96px;
    --space-19: 112px;
    --space-20: 128px;
    --space-21: 192px;

    --page-gutter: 16px;

    --spacing-layout-xs:  24px;
    --spacing-layout-sm:  32px;
    --spacing-layout-md:  48px;
    --spacing-layout-lg:  64px;
    --spacing-layout-xl:  96px;
    --spacing-layout-2xl: 128px;

    /* Typography — mode "Mobile" */
    --font-size-2xl: 22px;
    --font-size-3xl: 26px;
    --font-size-4xl: 30px;
    --font-size-5xl: 40px;
    --font-size-6xl: 48px;
    --font-size-7xl: 56px;

    /* Border Radius — mode "Mobile" */
    --radius-md:  4px;
    --radius-lg:  6px;
    --radius-xl:  8px;
    --radius-2xl: 12px;
    --radius-3xl: 16px;

    --header-height: 60px;
  }
}