/* ReelKeep design tokens v1.0 (approved by Sasi, 2 Oct 2026)
   One source for the design book, both prototypes and, later, Tailwind (web) and Asset Catalog colours (iOS).
   Naming: --rk-<group>-<name>. Semantic tokens switch with the theme; brand and intent tokens do not. */


:root {
  /* Brand core */
  --rk-ink: #121C26;          /* primary dark, from the existing App Store icon */
  --rk-paper: #F7F3EC;        /* primary light */
  --rk-marigold: #F4B23E;     /* the "keep" accent: ribbon, primary action fill */
  --rk-marigold-deep: #8A5600;/* marigold for text on light (5.6:1 on paper) */
  --rk-marigold-soft: #FCEBC8;

  /* Neutral ramp (cool ink to warm paper) */
  --rk-n-950: #0B1219;
  --rk-n-900: #121C26;
  --rk-n-800: #1B2733;
  --rk-n-700: #2A3744;
  --rk-n-600: #3E4A56;
  --rk-n-500: #5F6872;
  --rk-n-400: #8C949C;
  --rk-n-300: #B9BDC0;
  --rk-n-200: #DCD7CE;
  --rk-n-150: #E7E1D6;
  --rk-n-100: #EFE9DF;
  --rk-n-50:  #F7F3EC;
  --rk-n-0:   #FFFDF9;

  /* Status */
  --rk-done: #2F855A;      --rk-done-text: #276F4B;   --rk-done-soft: #DDF0E4;
  --rk-danger: #C2412D;    --rk-danger-text: #A93624; --rk-danger-soft: #F8E0DA;
  --rk-info: #3D6E9E;      --rk-info-soft: #DFE9F3;

  /* Intents (C2). Base = icon, dot, chart; text = AA on paper; soft = chip fill */
  --rk-intent-watch: #5A7086;   --rk-intent-watch-text: #46596C;   --rk-intent-watch-soft: #E3E9EF;
  --rk-intent-cook: #D2542C;    --rk-intent-cook-text: #A83E1C;    --rk-intent-cook-soft: #FBE3D9;
  --rk-intent-try: #7A55D3;     --rk-intent-try-text: #6141B5;     --rk-intent-try-soft: #ECE5FA;
  --rk-intent-learn: #2F6BD8;   --rk-intent-learn-text: #2457B5;   --rk-intent-learn-soft: #E0EAFB;
  --rk-intent-buy: #B4407F;     --rk-intent-buy-text: #96336A;     --rk-intent-buy-soft: #F7E1EC;
  --rk-intent-go: #12857A;      --rk-intent-go-text: #0E6B62;      --rk-intent-go-soft: #D9F0EC;
  --rk-intent-idea: #B98100;    --rk-intent-idea-text: #855D00;    --rk-intent-idea-soft: #F8ECCB;
  --rk-intent-contact: #6B7A2E; --rk-intent-contact-text: #56632A; --rk-intent-contact-soft: #EBEFD9;

  /* AI route badges (X10). Colour says who pays: green/blue/violet = no credits, marigold = credits */
  --rk-route-device: #2F855A;
  --rk-route-pcc: #3D6E9E;
  --rk-route-byok: #7A55D3;
  --rk-route-cloud: #B98100;
  --rk-route-server: #5F6872;

  /* Charts (I1-I4): saved is context (grey), watched is marigold-deep, acted on is done green */
  --rk-viz-saved: #5F6872;
  --rk-viz-watched: #B98100;
  --rk-viz-acted: #2F855A;

  /* Platform marks (badges only; never recolour the platform's own assets) */
  --rk-yt: #FF0033;
  --rk-tt: #111111;
  --rk-ig: #D62976;
  --rk-li: #0A66C2;
  --rk-web: #5F6872;

  /* Type */
  --rk-font-display: "Fraunces", "New York", ui-serif, Georgia, serif;
  --rk-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --rk-font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --rk-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Web type scale (px). Body is 14 for the dense keyboard workspace, 16 on public and marketing pages */
  --rk-text-11: 11px;  --rk-text-12: 12px;  --rk-text-13: 13px;  --rk-text-14: 14px;
  --rk-text-16: 16px;  --rk-text-18: 18px;  --rk-text-22: 22px;  --rk-text-28: 28px;
  --rk-text-36: 36px;  --rk-text-48: 48px;  --rk-text-64: 64px;
  --rk-leading-tight: 1.15; --rk-leading-snug: 1.35; --rk-leading-body: 1.5;

  /* Space (4-pt grid) */
  --rk-s-0: 2px; --rk-s-1: 4px; --rk-s-2: 8px; --rk-s-3: 12px; --rk-s-4: 16px; --rk-s-5: 20px;
  --rk-s-6: 24px; --rk-s-8: 32px; --rk-s-10: 40px; --rk-s-12: 48px; --rk-s-16: 64px;

  /* Radius */
  --rk-r-xs: 4px; --rk-r-sm: 6px; --rk-r-md: 10px; --rk-r-lg: 14px; --rk-r-xl: 20px; --rk-r-sheet: 28px; --rk-r-pill: 999px;

  /* Elevation */
  --rk-shadow-1: 0 1px 2px rgba(18, 28, 38, .06), 0 1px 1px rgba(18, 28, 38, .04);
  --rk-shadow-2: 0 4px 12px rgba(18, 28, 38, .08), 0 1px 3px rgba(18, 28, 38, .06);
  --rk-shadow-3: 0 18px 48px rgba(18, 28, 38, .18), 0 4px 12px rgba(18, 28, 38, .08);

  /* Motion. Everything respects prefers-reduced-motion */
  --rk-ease: cubic-bezier(.2, .8, .2, 1);
  --rk-ease-in: cubic-bezier(.4, 0, 1, 1);
  --rk-dur-1: 120ms;  /* press, hover, toggle */
  --rk-dur-2: 200ms;  /* list change, toast */
  --rk-dur-3: 320ms;  /* sheet, page */

  /* Semantic, light theme (default) */
  --rk-bg: var(--rk-n-50);
  --rk-bg-sunken: var(--rk-n-100);
  --rk-surface: var(--rk-n-0);
  --rk-surface-2: var(--rk-n-100);
  --rk-surface-raised: #FFFFFF;
  --rk-border: var(--rk-n-150);
  --rk-border-strong: var(--rk-n-200);
  --rk-field-border: var(--rk-n-400); /* inputs and checkboxes: 3:1 against surfaces in both themes */
  --rk-text: var(--rk-n-900);
  --rk-text-2: var(--rk-n-600);
  --rk-text-3: var(--rk-n-500);
  --rk-text-inverse: var(--rk-n-50);
  --rk-accent: var(--rk-marigold);
  --rk-on-accent: var(--rk-ink);
  --rk-accent-text: var(--rk-marigold-deep);
  --rk-selected: var(--rk-marigold-soft);
  --rk-focus: var(--rk-ink);
  --rk-hover: rgba(18, 28, 38, .05);
  --rk-press: rgba(18, 28, 38, .09);
  --rk-scrim: rgba(11, 18, 25, .48);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rk-bg: #0E151C;
    --rk-bg-sunken: #0A1015;
    --rk-surface: #151F29;
    --rk-surface-2: #1B2733;
    --rk-surface-raised: #1E2B37;
    --rk-border: #25323F;
    --rk-border-strong: #33424F;
    --rk-text: #F2EDE4;
    --rk-text-2: #BAC0C6;
    --rk-text-3: #8F989F;
    --rk-text-inverse: var(--rk-ink);
    --rk-accent-text: var(--rk-marigold);
    --rk-selected: rgba(244, 178, 62, .16);
    --rk-focus: var(--rk-marigold);
    --rk-hover: rgba(242, 237, 228, .05);
    --rk-press: rgba(242, 237, 228, .09);
    --rk-scrim: rgba(0, 0, 0, .6);
    --rk-done-text: #6CC495; --rk-done-soft: rgba(47, 133, 90, .2);
    --rk-danger-text: #F08C78; --rk-danger-soft: rgba(194, 65, 45, .2);
    --rk-info-soft: rgba(61, 110, 158, .22);
    --rk-route-server: var(--rk-n-400);
    --rk-viz-saved: #8C949C; --rk-viz-watched: #F4B23E; --rk-viz-acted: #6CC495;
    --rk-intent-watch-text: #A9BBCD;   --rk-intent-watch-soft: rgba(90, 112, 134, .24);
    --rk-intent-cook-text: #F2967A;    --rk-intent-cook-soft: rgba(210, 84, 44, .2);
    --rk-intent-try-text: #B9A2F2;     --rk-intent-try-soft: rgba(122, 85, 211, .22);
    --rk-intent-learn-text: #93B5F2;   --rk-intent-learn-soft: rgba(47, 107, 216, .22);
    --rk-intent-buy-text: #E79AC4;     --rk-intent-buy-soft: rgba(180, 64, 127, .22);
    --rk-intent-go-text: #6FD0C3;      --rk-intent-go-soft: rgba(18, 133, 122, .22);
    --rk-intent-idea-text: #EBC15E;    --rk-intent-idea-soft: rgba(185, 129, 0, .22);
    --rk-intent-contact-text: #C3D07F; --rk-intent-contact-soft: rgba(107, 122, 46, .26);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --rk-bg: #0E151C;
  --rk-bg-sunken: #0A1015;
  --rk-surface: #151F29;
  --rk-surface-2: #1B2733;
  --rk-surface-raised: #1E2B37;
  --rk-border: #25323F;
  --rk-border-strong: #33424F;
  --rk-text: #F2EDE4;
  --rk-text-2: #BAC0C6;
  --rk-text-3: #8F989F;
  --rk-text-inverse: var(--rk-ink);
  --rk-accent-text: var(--rk-marigold);
  --rk-selected: rgba(244, 178, 62, .16);
  --rk-focus: var(--rk-marigold);
  --rk-hover: rgba(242, 237, 228, .05);
  --rk-press: rgba(242, 237, 228, .09);
  --rk-scrim: rgba(0, 0, 0, .6);
  --rk-done-text: #6CC495; --rk-done-soft: rgba(47, 133, 90, .2);
  --rk-danger-text: #F08C78; --rk-danger-soft: rgba(194, 65, 45, .2);
  --rk-info-soft: rgba(61, 110, 158, .22);
  --rk-route-server: var(--rk-n-400);
  --rk-viz-saved: #8C949C; --rk-viz-watched: #F4B23E; --rk-viz-acted: #6CC495;
  --rk-intent-watch-text: #A9BBCD;   --rk-intent-watch-soft: rgba(90, 112, 134, .24);
  --rk-intent-cook-text: #F2967A;    --rk-intent-cook-soft: rgba(210, 84, 44, .2);
  --rk-intent-try-text: #B9A2F2;     --rk-intent-try-soft: rgba(122, 85, 211, .22);
  --rk-intent-learn-text: #93B5F2;   --rk-intent-learn-soft: rgba(47, 107, 216, .22);
  --rk-intent-buy-text: #E79AC4;     --rk-intent-buy-soft: rgba(180, 64, 127, .22);
  --rk-intent-go-text: #6FD0C3;      --rk-intent-go-soft: rgba(18, 133, 122, .22);
  --rk-intent-idea-text: #EBC15E;    --rk-intent-idea-soft: rgba(185, 129, 0, .22);
  --rk-intent-contact-text: #C3D07F; --rk-intent-contact-soft: rgba(107, 122, 46, .26);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rk-dur-1: 0ms; --rk-dur-2: 0ms; --rk-dur-3: 0ms; }
}