/* Squadify AI premium tokens — single source for palette, type, space, shape, motion.
   Media-query breakpoints stay literal because custom properties cannot be used there. */
:root {
  /* Flat neutral dark base with neon-green action */
  --color-page: #121212;
  --color-surface: #1C1C1C;
  --color-ink: #F5F5F5;
  --color-muted: #A3A3A3;
  --color-action: #00FF22;
  --color-action-hover: #5CFF77;
  --color-accent: #00FF22;
  --color-plum: #D6A3CC;
  --color-soft: #232323;
  --color-line: #262626;
  --color-field-border: #333333;
  --color-dark: #0C0C0C;
  --color-on-dark: #F5F5F5;
  --color-muted-dark: #B5B5B5;

  /* Derived tints and transparency — defined here so components use variables only */
  --color-soft-warm: color-mix(in srgb, var(--color-soft) 55%, var(--color-page));
  --color-line-soft: color-mix(in srgb, var(--color-line) 55%, var(--color-page));
  --color-action-pressed: color-mix(in srgb, var(--color-action) 72%, var(--color-page));
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  --color-accent-line: color-mix(in srgb, var(--color-accent) 42%, var(--color-soft));
  --color-plum-soft: color-mix(in srgb, var(--color-plum) 12%, var(--color-surface));
  --color-dark-lift: color-mix(in srgb, var(--color-on-dark) 7%, var(--color-dark));
  --color-dark-line: color-mix(in srgb, var(--color-on-dark) 18%, var(--color-dark));
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-page) 75%, transparent);
  --shadow-md: 0 12px 32px color-mix(in srgb, var(--color-page) 70%, transparent);
  --shadow-lg: 0 24px 64px color-mix(in srgb, var(--color-page) 75%, transparent);
  --shadow-glow: 0 0 28px color-mix(in srgb, var(--color-accent) 30%, transparent);
  --inset-gloss: inset 0 1px 0 color-mix(in srgb, var(--color-on-dark) 22%, transparent);
  --scrim: color-mix(in srgb, var(--color-page) 62%, transparent);
  --field-error: #FF8FA3;

  /* Hero collage bars and fades — layered on the hero backdrop */
  --collage-bar: #2E2E2E;
  --header-bg: color-mix(in srgb, var(--color-page) 78%, transparent);

  /* Typography */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Spacing scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Layout */
  --content-max: 1200px;
  --gutter-desktop: 32px;
  --gutter-mobile: 20px;
  --header-h: 76px;
  --header-h-mobile: 64px;
  --radius-button: 11px;
  --radius-surface: 20px;
  --radius-card: 16px;

  /* Motion */
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-control: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 160ms;
  --duration-base: 200ms;
  --duration-enter: 450ms;
  --duration-step: 220ms;
}

/* Premium frame and restrained motion */
:root {
  --page-frame: 95%;
  --color-dot: color-mix(in srgb, var(--color-ink) 15%, transparent);
  --color-dot-active: color-mix(in srgb, var(--color-action) 48%, var(--color-ink));
  --color-hero-light: color-mix(in srgb, var(--color-action) 7%, transparent);
  --color-accent-soft: color-mix(in srgb, var(--color-action) 5%, var(--color-surface));
  --color-accent-line: color-mix(in srgb, var(--color-action) 22%, var(--color-surface));
  --hero-type: clamp(42px, 5.4vw, 104px);
  --detail-type: clamp(36px, 4vw, 72px);
  --type-small: 14px;
  --type-body: 16px;
  --hero-gap: clamp(32px, 4vw, 64px);
  --reading-measure: 52ch;
  --preview-measure: 840px;
  --dot-pitch: 24px;
  --dot-radius: 1px;
  --dot-edge: 1.5px;
  --lift: -2px;
  --tilt-step: 1deg;
  --perspective: 1200px;
  --arrow-shift: 3px;
  --motion-shift: 4px;
  --workflow-height: 320px;
  --heading-tracking: -0.045em;
}

/* Approved supplied design: exact source palette and dimensions. */
:root {
  --color-page: #0d100e;
  --color-surface: #171b18;
  --color-soft: #202621;
  --color-ink: #f4f7f4;
  --color-muted: #a8b2aa;
  --color-line: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --sm-bg: var(--color-page);
  --sm-surface: var(--color-surface);
  --sm-soft: var(--color-soft);
  --sm-ink: var(--color-ink);
  --sm-muted: var(--color-muted);
  --sm-green: var(--color-action);
  --sm-line: var(--color-line);
  --sm-dot-rgb: 168,178,170;
  --sm-green-rgb: 0,255,34;
  --sm-note-bg: #101411;
  --sm-review-ink: #a0dba9;
  --sm-review-bg: #203024;
  --sm-featured-bg: #181e19;
  --sm-black: #000000;
  --sm-tilt-limit: 2.2deg;
  --sm-magnet-limit: 4px;
  --sm-motion-timeline: 1000ms;
  --sm-highlight: color-mix(in srgb, var(--sm-ink) 24%, transparent);
  --sm-hero-light: color-mix(in srgb, var(--sm-green) 4.5%, transparent);
  --sm-dot: color-mix(in srgb, var(--sm-muted) 12%, transparent);
  --sm-workspace-line: color-mix(in srgb, var(--sm-ink) 14%, transparent);
  --sm-shadow: color-mix(in srgb, var(--sm-black) 32%, transparent);
  --sm-top-highlight: color-mix(in srgb, var(--sm-ink) 5%, transparent);
  --sm-note-line: color-mix(in srgb, var(--sm-ink) 6%, transparent);
  --sm-review-line: color-mix(in srgb, var(--sm-review-ink) 12%, transparent);
  --sm-selected-line: color-mix(in srgb, var(--sm-green) 18%, transparent);
  --sm-size-320: 320px;
  --sm-size-15: 15px;
  --sm-size-17: 17px;
  --sm-size-86: 86px;
  --sm-size-24: 24px;
  --sm-size-1: 1px;
  --sm-size-23: 23px;
  --sm-tracking-minus-point-06: -.06em;
  --sm-size-3: 3px;
  --sm-size-26: 26px;
  --sm-size-14: 14px;
  --sm-size-12: 12px;
  --sm-duration-160: 160ms;
  --sm-size-48: 48px;
  --sm-size-18: 18px;
  --sm-size-0: 0px;
  --sm-size-1point-4: 1.4px;
  --sm-size-36: 36px;
  --sm-size-70: 70px;
  --sm-size-76: 76px;
  --sm-size-11: 11px;
  --sm-tracking-point-13: .13em;
  --sm-size-10: 10px;
  --sm-size-6: 6px;
  --sm-size-38: 38px;
  --sm-fluid-5point-4: 5.4vw;
  --sm-size-80: 80px;
  --sm-size-16: 16px;
  --sm-measure-43: 43ch;
  --sm-size-30: 30px;
  --sm-size-22: 22px;
  --sm-size-13: 13px;
  --sm-size-44: 44px;
  --sm-size-8: 8px;
  --sm-size-20: 20px;
  --sm-size-1000: 1000px;
  --sm-angle-0: 0deg;
  --sm-size-32: 32px;
  --sm-size-9: 9px;
  --sm-size-7: 7px;
  --sm-size-348: 348px;
  --sm-size-5: 5px;
  --sm-tracking-minus-point-025: -.025em;
  --sm-tracking-point-12: .12em;
  --sm-size-4: 4px;
  --sm-size-40: 40px;
  --sm-size-52: 52px;
  --sm-size-28: 28px;
  --sm-tracking-minus-point-045: -.045em;
  --sm-tracking-minus-point-04: -.04em;
  --sm-size-108: 108px;
  --sm-size-21: 21px;
  --sm-size-2: 2px;
  --sm-size-minus-2: -2px;
  --sm-size-minus-1: -1px;
  --sm-size-56: 56px;
  --sm-size-650: 650px;
  --sm-fluid-7point-6: 7.6vw;
  --sm-size-65: 65px;
  --sm-measure-49: 49ch;
  --sm-size-305: 305px;
  --sm-size-19: 19px;
  --sm-size-74: 74px;
  --sm-size-25: 25px;
}