/* Self-hosted webfonts (no external CDN at runtime) */

@font-face {font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ── tokens/colors.css ── */
/* PlayPlan.ai — Color Tokens */
:root {
  /* ── Blue (Primary) ─────────────────────── */
  --color-blue-50:  #EFF6FF;
  --color-blue-100: #EBF3FD;
  --color-blue-200: #BFDBFE;
  --color-blue-300: #7DB8F5;
  --color-blue-400: #5B9FEF;
  --color-blue-500: #2F80ED;
  --color-blue-600: #1A6DD4;
  --color-blue-700: #1558AC;
  --color-blue-800: #0F4285;
  --color-blue-900: #0A2D5E;

  /* ── Green (Success) ─────────────────────── */
  --color-green-50:  #F0FDF4;
  --color-green-100: #E9F7EF;
  --color-green-200: #BBF7D0;
  --color-green-300: #6DC896;
  --color-green-400: #4DB87B;
  --color-green-500: #27AE60;
  --color-green-600: #1E8F4E;
  --color-green-700: #166B3A;
  --color-green-800: #0F4B28;
  --color-green-900: #0A3219;

  /* ── Yellow (Warning / Action) ───────────── */
  --color-yellow-50:  #FFFBEB;
  --color-yellow-100: #FEF9E7;
  --color-yellow-200: #FDE68A;
  --color-yellow-300: #F8DF8D;
  --color-yellow-400: #F6D46A;
  --color-yellow-500: #F2C94C;
  --color-yellow-600: #E6B52A;
  --color-yellow-700: #C99A1A;
  --color-yellow-800: #9A7310;
  --color-yellow-900: #6B4E0A;

  /* ── Red (Critical / last chance) ────────── */
  --color-red-50:  #FEF2F2;
  --color-red-100: #FDECEC;
  --color-red-200: #F8C9C9;
  --color-red-300: #F19E9E;
  --color-red-400: #EF7878;
  --color-red-500: #EB5757;
  --color-red-600: #D63E3E;
  --color-red-700: #B32B2B;
  --color-red-800: #8A1F1F;
  --color-red-900: #5E1414;

  /* ── Purple (Social signal) ──────────────── */
  --color-purple-50:  #F5F3FF;
  --color-purple-100: #F0EEFF;
  --color-purple-200: #DDD6FE;
  --color-purple-300: #B3A4F8;
  --color-purple-400: #9580F5;
  --color-purple-500: #7B61FF;
  --color-purple-600: #6040ED;
  --color-purple-700: #4D2FBD;
  --color-purple-800: #3A218E;
  --color-purple-900: #28175F;

  /* ── Neutrals ─────────────────────────────── */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  --color-white:    #FFFFFF;
  --color-black:    #000000;

  /* ── Semantic aliases ─────────────────────── */
  /* Brand */
  --color-primary:       var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-primary-light: var(--color-blue-100);
  --color-success:       var(--color-green-500);
  --color-success-hover: var(--color-green-600);
  --color-success-light: var(--color-green-100);
  --color-warning:       var(--color-yellow-500);
  --color-warning-hover: var(--color-yellow-600);
  --color-warning-light: var(--color-yellow-100);
  --color-social:        var(--color-purple-500);
  --color-social-light:  var(--color-purple-100);
  --color-danger:        var(--color-red-500);
  --color-danger-hover:  var(--color-red-600);
  --color-danger-light:  var(--color-red-100);

  /* Text */
  /* Each step is chosen to clear 4.5:1 on white AND on gray-50.       */
  /* Do not lighten these — gray-400 as body text fails AA everywhere, */
  /* including on pure white (2.54:1).                                 */
  --text-primary:   var(--color-gray-800);  /* 12.63:1 on white */
  --text-secondary: var(--color-gray-600);  /*  7.56:1 on white */
  --text-muted:     var(--color-gray-500);  /*  4.83:1 on white */
  --text-on-dark:   var(--color-white);
  --text-link:      var(--color-blue-600);  /*  5.02:1 — blue-500 fails at 3.87:1 */

  /* ── Accessible pairings (WCAG AA) ────────── */
  /* Filled buttons — a white label needs 4.5:1, so the 500 level is  */
  /* too light for every family except yellow (which takes ink text).  */
  --fill-primary:        var(--color-blue-600);   /* white 5.02:1 */
  --fill-primary-hover:  var(--color-blue-700);   /* white 6.95:1 */
  --fill-success:        var(--color-green-700);  /* white 6.57:1 */
  --fill-success-hover:  var(--color-green-800);  /* white 10.21:1 */
  --fill-danger:         var(--color-red-600);    /* white 4.55:1 */
  --fill-danger-hover:   var(--color-red-700);    /* white 6.37:1 */
  --fill-warning:        var(--color-yellow-500); /* ink  9.25:1 */

  /* Text on a tinted surface of the same family (the 50 or 100 step). */
  /* Yellow needs the 900 step — yellow-700 tops out at 2.45:1 and    */
  /* even yellow-800 only reaches 4.12:1 on yellow-100.               */
  --on-tint-yellow: var(--color-yellow-900);  /* 7.32:1 */
  --on-tint-green:  var(--color-green-700);   /* 5.95:1 */
  --on-tint-blue:   var(--color-blue-700);    /* 6.21:1 */
  --on-tint-purple: var(--color-purple-700);  /* 7.48:1 */
  --on-tint-red:    var(--color-red-700);     /* 5.58:1 */

  /* Icons and chevrons on a tinted surface (graphics — 3:1 minimum). */
  --accent-on-tint-yellow: var(--color-yellow-800);
  --accent-on-tint-green:  var(--color-green-700);
  --accent-on-tint-blue:   var(--color-blue-600);
  --accent-on-tint-red:    var(--color-red-600);
  --accent-on-tint-purple: var(--color-purple-600);

  /* Muted text loses ~0.4 on a tinted card — step down one level. */
  --text-muted-on-tint: var(--color-gray-600);  /* 6.89–7.29:1 */

  /* Surfaces */
  --surface-bg:      var(--color-gray-50);
  --surface-card:    var(--color-white);
  --surface-overlay: rgba(17, 24, 39, 0.48);

  /* Border */
  --border-default: var(--color-gray-200);
  --border-subtle:  var(--color-gray-100);
  --border-strong:  var(--color-gray-300);
}

/* ── tokens/typography.css ── */
/* PlayPlan.ai — Typography Tokens */
/* NOTE: Using Google Fonts CDN for both typefaces.        */
/* Provide local .woff2 files for offline / production use.*/
:root {
  /* ── Font families ─────────────────────── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Mono', ui-monospace, monospace;

  /* ── Size scale ────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  34px;
  --text-5xl:  42px;

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

  /* ── Font weights ──────────────────────── */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ── Letter spacing ───────────────────── */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-widest:  0.08em;
}

/* ── Base reset ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── tokens/spacing.css ── */
/* PlayPlan.ai — Spacing Tokens */
:root {
  /* ── Base scale (4px grid) ─────────────── */
  --space-0:   0px;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* ── Semantic layout ───────────────────── */
  --page-padding-x:  var(--space-4);     /* 16px — mobile horizontal margin     */
  --page-padding-y:  var(--space-5);     /* 20px — section vertical padding      */
  --card-padding:    var(--space-4);     /* 16px — card inner padding            */
  --card-gap:        var(--space-3);     /* 12px — gap between cards in a list   */
  --section-gap:     var(--space-6);     /* 24px — gap between page sections     */
  --nav-height:      64px;               /* Bottom nav bar height                */
  --header-height:   60px;              /* Top header height                    */
  --touch-target:    44px;              /* Minimum touch target (iOS HIG)       */
}

/* ── tokens/effects.css ── */
/* PlayPlan.ai — Effects Tokens */
:root {
  /* ── Border radius ─────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.10), 0 4px 8px rgba(17, 24, 39, 0.05);
  --shadow-xl: 0 16px 40px rgba(17, 24, 39, 0.12), 0 8px 16px rgba(17, 24, 39, 0.06);

  /* ── Focus rings ──────────────────────── */
  --focus-ring: 0 0 0 3px rgba(47, 128, 237, 0.30);
  --focus-ring-success: 0 0 0 3px rgba(39, 174, 96, 0.30);

  /* ── Transitions ──────────────────────── */
  --transition-fast:   100ms ease;   /* @kind other */
  --transition-base:   180ms ease;   /* @kind other */
  --transition-slow:   280ms ease;   /* @kind other */
  --transition-bounce: 220ms cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* ── Z-index ──────────────────────────── */
  --z-base:    1;   /* @kind other */
  --z-raised:  10;  /* @kind other */
  --z-overlay: 100; /* @kind other */
  --z-modal:   200; /* @kind other */
  --z-toast:   300; /* @kind other */
}

/* ── tokens/marketing.css ── */
/* PlayPlan.ai — Marketing / Landing Page Tokens */
/* WEB & MARKETING SURFACES ONLY. Do not use these in the app UI.          */
/* The app system reserves yellow/green/red/purple for semantic state and  */
/* forbids gradients on surfaces. Marketing needs a decorative accent and  */
/* larger type, so this layer adds one accent hue (lime/chartreuse, taken  */
/* from the logo ball) plus a display scale and section-band surfaces.     */

:root {
  /* ── Lime / Chartreuse — the marketing accent ─────────────── */
  /* Straight from the logo ball. Carries NO semantic meaning,   */
  /* so it is free for decorative use on the web.               */
  --color-lime-50:  #FBFEE9;
  --color-lime-100: #F5FBC9;
  --color-lime-200: #EAF69B;
  --color-lime-300: #E8F562;  /* logo highlight */
  --color-lime-400: #DCEC4E;
  --color-lime-500: #CDE23C;  /* logo core — the brand accent */
  --color-lime-600: #AFC92A;  /* logo shadow */
  --color-lime-700: #8BA31D;  /* decorative only — FAILS AA as text on white */
  --color-lime-800: #667814;  /* 4.93:1 on white — the lightest lime legal as text */
  --color-lime-900: #44510D;

  /* ── Ink — dark bands read navy, never pure black ─────────── */
  --mkt-ink:        #0C1E3A;
  --mkt-ink-soft:   #16305A;
  --mkt-ink-muted:  #8FA6C7;  /* body text on ink */

  /* ── Section band surfaces ────────────────────────────────── */
  /* Alternate these down the page. Never place two tinted      */
  /* bands next to each other — always separate with white.     */
  --mkt-band-white: var(--color-white);
  --mkt-band-off:   var(--color-gray-50);
  --mkt-band-ink:   var(--mkt-ink);
  --mkt-band-lime:  var(--color-lime-500);
  --mkt-band-blue:  var(--color-blue-500);

  /* ── Accent semantics on marketing surfaces ───────────────── */
  --mkt-accent:        var(--color-lime-500);
  --mkt-accent-hover:  var(--color-lime-600);
  --mkt-accent-quiet:  var(--color-lime-100);
  /* Lime NEVER carries text colour as a fill — contrast is too low. */
  /* Use it as a background with ink text, or as a rule/underline.    */
  --mkt-on-accent:     var(--color-gray-800);
  /* The one lime that IS legal as small text on white (4.93:1).      */
  --mkt-accent-text:   var(--color-lime-800);

  /* Muted text on a TINTED surface (gray-50 cards, off-white bands). */
  /* --text-muted (#9CA3AF) only passes AA on pure white; on gray-50  */
  /* it drops to 2.43:1. Use this instead — 7.25:1 on gray-50.        */
  --mkt-text-muted-on-tint: var(--color-gray-600);

  /* ── Display type scale (desktop) ─────────────────────────── */
  /* Larger than the app scale, which tops out at 42px.          */
  --mkt-display-1: 68px;
  --mkt-display-2: 52px;
  --mkt-display-3: 40px;
  --mkt-display-4: 28px;
  --mkt-lead:      20px;   /* hero subhead / section intro */
  --mkt-body:      17px;   /* marketing body — bigger than app 15px */
  --mkt-eyebrow:   13px;   /* ALL CAPS section label */

  /* ── Marketing radius ────────────────────────────────────── */
  --mkt-radius-card: var(--radius-3xl);  /* 24px — softer than app cards */
  --mkt-radius-hero: 32px;               /* device frames, big media */

  /* ── Gradients — permitted ONLY on marketing surfaces ─────── */
  --mkt-gradient-ball: radial-gradient(circle at 35% 30%, #E8F562 0%, #CDE23C 55%, #AFC92A 100%); /* @kind color */
  --mkt-gradient-ink:  linear-gradient(160deg, #16305A 0%, #0C1E3A 100%); /* @kind color */

  /* ── Section rhythm ──────────────────────────────────────── */
  --mkt-section-y:     96px;   /* vertical padding, desktop */
  --mkt-section-y-sm:  56px;   /* vertical padding, mobile */
  --mkt-max-width:    1120px;  /* content column */
}