/* Kerdial design tokens — flattened single file.
   Import once at the app root. Every value below is the source of truth; see README.md.
   Fonts: Google Fonts CDN. To self-host, download Gabarito / Manrope / JetBrains Mono
   and replace the @import below with local @font-face rules. */
@import "./fonts.css";

/* ============ tokens/colors.css ============ */
:root{
  /* ---- Base ramps ---- */
  /* Ink: warm-cool charcoal, never pure black */
  --ink-950:#0E1116; --ink-900:#14181F; --ink-800:#1D232C; --ink-700:#2A323D;
  --ink-600:#3D4854; --ink-500:#5A6673; --ink-400:#7C8792; --ink-300:#A5AEB8;
  --ink-200:#CBD2D9; --ink-100:#E4E8EC; --ink-50:#F1F4F6;

  /* Paper: slightly warm off-whites, the app's default ground */
  --paper-0:#FFFFFF; --paper-50:#FBFAF8; --paper-100:#F6F4F0; --paper-200:#EDEAE4;

  /* Teal — primary brand. Confident, calm, not corporate-navy. */
  --teal-50:#E4FBF5; --teal-100:#BFF4E7; --teal-200:#87E8D3; --teal-300:#4AD7BB;
  --teal-400:#1FBFA1; --teal-500:#00A98F; --teal-600:#028A76; --teal-700:#066A5C;
  --teal-800:#085147; --teal-900:#073B34;

  /* Apricot — energy, gamification, streaks, CTAs that celebrate */
  --apricot-50:#FFF3EA; --apricot-100:#FFE1CB; --apricot-200:#FFC29B;
  --apricot-300:#FFA269; --apricot-400:#FF7A3D; --apricot-500:#F4601E;
  --apricot-600:#D14913; --apricot-700:#A33810;

  /* Lilac — crypto & alt asset classes */
  --lilac-100:#EAE7FE; --lilac-300:#B3A8FA; --lilac-500:#7C6CF0; --lilac-700:#4F3FC4;
  /* Sky — cash, bonds, informational */
  --sky-100:#DFEEFE; --sky-300:#8FC4FB; --sky-500:#2E90FA; --sky-700:#1364C4;
  /* Lemon — XP, badges, highlights */
  --lemon-100:#FEF6CF; --lemon-300:#FADE6A; --lemon-500:#EFC419; --lemon-700:#B08D06;

  /* Market semantics */
  --gain-100:#D8F5E5; --gain-500:#12B76A; --gain-700:#08794A;
  --loss-100:#FEE1E0; --loss-500:#F04438; --loss-700:#B3251C;
  --warn-100:#FEF0C7; --warn-500:#F79009; --warn-700:#B54708;

  /* ---- Semantic aliases: use THESE in components ---- */
  --bg-app:var(--paper-100);
  --bg-canvas:var(--paper-50);
  --surface-card:var(--paper-0);
  --surface-sunken:var(--paper-200);
  --surface-inverse:var(--ink-900);
  --surface-brand:var(--teal-500);
  --surface-brand-soft:var(--teal-50);
  --surface-accent-soft:var(--apricot-50);

  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-on-brand:#FFFFFF;
  --text-on-inverse:var(--paper-50);
  --text-brand:var(--teal-600);
  --text-gain:var(--gain-700);
  --text-loss:var(--loss-700);
  --text-link:var(--teal-600);
  --text-link-hover:var(--teal-700);

  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-brand:var(--teal-300);
  --focus-ring:var(--teal-400);

  --chart-1:var(--teal-500); --chart-2:var(--apricot-400); --chart-3:var(--lilac-500);
  --chart-4:var(--sky-500);  --chart-5:var(--lemon-500);   --chart-6:var(--ink-400);

  /* Asset-class colors — fixed mapping, never re-assign per screen */
  --class-stock:var(--teal-500);
  --class-etf:var(--sky-500);
  --class-fund:var(--lilac-500);
  --class-bond:var(--ink-400);
  --class-crypto:var(--apricot-400);
  --class-cash:var(--lemon-500);
}

/* ============ tokens/typography.css ============ */
:root{
  --font-display:"Gabarito","Manrope",system-ui,sans-serif;
  --font-text:"Manrope",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* Type scale — 1.25 ratio, tuned for dense financial UI */
  --size-display-xl:56px; --lh-display-xl:1.02; /* @kind other */ 
  --size-display-l:44px;  --lh-display-l:1.05; /* @kind other */
  --size-display-m:34px;  --lh-display-m:1.1; /* @kind other */
  --size-title-l:26px;    --lh-title-l:1.18; /* @kind other */
  --size-title-m:21px;    --lh-title-m:1.24; /* @kind other */
  --size-title-s:17px;    --lh-title-s:1.3; /* @kind other */
  --size-body-l:16px;     --lh-body-l:1.55; /* @kind other */
  --size-body-m:14px;     --lh-body-m:1.5; /* @kind other */
  --size-body-s:13px;     --lh-body-s:1.45; /* @kind other */
  --size-label:12px;      --lh-label:1.3; /* @kind other */
  --size-micro:11px;      --lh-micro:1.2; /* @kind other */

  --weight-regular:400; /* @kind font */ --weight-medium:500; /* @kind font */ --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */ --weight-black:800; /* @kind font */

  --track-display:-0.02em; /* @kind other */ --track-title:-0.01em; /* @kind other */ --track-body:0em; /* @kind other */
  --track-label:0.04em; /* @kind other */ --track-micro:0.08em; /* @kind other */

  /* Numbers: always tabular + slashed zero in tables and value readouts */
  --numeric-tabular:"tnum" 1,"zero" 1,"ss01" 1; /* @kind other */

  --text-display-xl:var(--weight-bold) var(--size-display-xl)/var(--lh-display-xl) var(--font-display);
  --text-display-l:var(--weight-bold) var(--size-display-l)/var(--lh-display-l) var(--font-display);
  --text-display-m:var(--weight-bold) var(--size-display-m)/var(--lh-display-m) var(--font-display);
  --text-title-l:var(--weight-bold) var(--size-title-l)/var(--lh-title-l) var(--font-display);
  --text-title-m:var(--weight-bold) var(--size-title-m)/var(--lh-title-m) var(--font-display);
  --text-title-s:var(--weight-semibold) var(--size-title-s)/var(--lh-title-s) var(--font-text);
  --text-body-l:var(--weight-regular) var(--size-body-l)/var(--lh-body-l) var(--font-text);
  --text-body-m:var(--weight-regular) var(--size-body-m)/var(--lh-body-m) var(--font-text);
  --text-body-s:var(--weight-regular) var(--size-body-s)/var(--lh-body-s) var(--font-text);
  --text-label:var(--weight-semibold) var(--size-label)/var(--lh-label) var(--font-text);
  --text-micro:var(--weight-semibold) var(--size-micro)/var(--lh-micro) var(--font-mono);
}

/* ============ tokens/spacing.css ============ */
:root{
  /* 4px base grid. 2px half-step exists only for icon nudges + hairline insets. */
  --space-0:0px; --space-half:2px; --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* Component rhythm */
  --pad-card:20px;
  --pad-card-lg:28px;
  --pad-control-x:16px;
  --pad-control-y:10px;
  --gap-stack:12px;
  --gap-section:32px;
  --row-height:56px;        /* asset table row */
  --row-height-compact:44px;
  --tap-target:44px;        /* mobile minimum, never smaller */

  /* Layout */
  --sidebar-width:248px;
  --sidebar-width-collapsed:72px;
  --topbar-height:64px;
  --content-max:1240px;
  --prose-max:68ch; /* @kind other */
  --mobile-safe-bottom:34px;
}

/* ============ tokens/radii.css ============ */
:root{
  --radius-xs:6px;
  --radius-sm:10px;      /* inputs, chips, small buttons */
  --radius-md:14px;      /* buttons, tiles */
  --radius-lg:18px;      /* cards */
  --radius-xl:24px;      /* panels, sheets, modals */
  --radius-2xl:32px;     /* hero blocks, mobile sheets */
  --radius-pill:999px;   /* tags, badges, segmented controls, avatars */
  --radius-logo:28%;     /* the squircle of the Kerdial mark */
}

/* ============ tokens/elevation.css ============ */
:root{
  /* Shadows are soft, cool-tinted, and low-contrast. Never black at high alpha. */
  --shadow-hairline:0 0 0 1px var(--border-subtle);
  --shadow-xs:0 1px 2px rgba(20,24,31,.06);
  --shadow-sm:0 1px 2px rgba(20,24,31,.05), 0 2px 6px rgba(20,24,31,.05);
  --shadow-md:0 2px 4px rgba(20,24,31,.04), 0 8px 20px -6px rgba(20,24,31,.10);
  --shadow-lg:0 4px 8px rgba(20,24,31,.05), 0 20px 40px -12px rgba(20,24,31,.16);
  --shadow-sheet:0 -8px 40px -8px rgba(20,24,31,.20);
  --shadow-brand:0 6px 18px -6px rgba(0,169,143,.45);
  --shadow-accent:0 6px 18px -6px rgba(255,122,61,.45);
  --shadow-inset-press:inset 0 2px 0 rgba(20,24,31,.08);

  /* Card recipe: hairline border + xs shadow. Elevation only on hover/overlay. */
  --card-border:1px solid var(--border-subtle); /* @kind other */
  --card-shadow:var(--shadow-xs);
  --card-shadow-hover:var(--shadow-md);

  --blur-glass:saturate(160%) blur(14px); /* @kind other */
  --scrim:rgba(14,17,22,.44);
}

/* ============ tokens/motion.css ============ */
:root{
  --dur-instant:90ms; /* @kind other */
  --dur-fast:150ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */
  --dur-celebrate:700ms; /* @kind other */   /* XP / badge / goal-reached moments only */

  --ease-out:cubic-bezier(.2,.8,.3,1); /* @kind other */      /* default for entrances + hovers */
  --ease-in-out:cubic-bezier(.6,0,.35,1); /* @kind other */
  --ease-spring:cubic-bezier(.34,1.4,.5,1); /* @kind other */ /* gamified pops, sparingly */

  --press-scale:.97; /* @kind other */
  --hover-lift:-1px; /* @kind spacing */
  --transition-control:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms; /* @kind other */--dur-fast:0ms; /* @kind other */--dur-base:0ms; /* @kind other */--dur-slow:0ms; /* @kind other */--dur-celebrate:0ms; /* @kind other */--press-scale:1; /* @kind other */--hover-lift:0px}
}

/* ============ tokens/base.css ============ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-app);color:var(--text-body);font:var(--text-body-m);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-family:var(--font-display);letter-spacing:var(--track-title)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;font-weight:var(--weight-semibold)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
button{font:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
.k-num{font-variant-numeric:tabular-nums slashed-zero;font-feature-settings:var(--numeric-tabular)}
.k-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
::selection{background:var(--teal-100);color:var(--ink-900)}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes k-slide-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes k-count-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}