/**
 * TBY brand design tokens — framework-agnostic CSS custom properties.
 *
 * This file is the single source of truth for the brand's *values* (colours,
 * type scale, tracking, radii, shadows). It is plain CSS custom properties so
 * any future non-web target (mobile/native) can read the same values without
 * importing React or Tailwind.
 *
 * Consumers (e.g. apps/web) import this, then expose the tokens to their
 * styling layer — in Tailwind v4 that means a `@theme inline { ... }` block
 * that maps these vars onto utility names. This file intentionally contains
 * NO Tailwind directives. Semantic roles live with each app, built on this
 * palette.
 */

:root {
  /* ===== Haido design-system palette =====
   * Sana's palette, verbatim from the Haido design system's tokens.json, and
   * the only palette here. Each app's colour roles resolve to it. */
  --color-cream-50: #fffaf0; /* raised paper */
  --color-cream-100: #fdf3e2; /* the canvas */
  --color-cream-200: #f8efe1; /* inset wells, table rows */
  --color-cream-300: #e8e0ce; /* hairlines */
  --color-cream-400: #e0d0b6; /* sand borders */
  --color-taupe-300: #c6bda9; /* disabled, divider tints */
  --color-taupe-400: #b6ab93;
  --color-taupe-600: #8a8069;
  --color-taupe-650: #776c53; /* secondary, tertiary and placeholder text */
  --color-taupe-700: #7a6f55;
  --color-taupe-800: #655b46;
  --color-taupe-900: #5a5340;
  --color-olive-200: #cfe0a0;
  --color-olive-500: #6e8a5a; /* positive, growth */
  --color-olive-600: #727459; /* meters */
  --color-olive-650: #466e40; /* chart positive, status good */
  --color-olive-700: #4c5034;
  --color-olive-800: #3f5a2c;
  --color-olive-900: #304c19; /* emphasis words */
  --color-olive-950: #3a4227; /* ink: body text and headings */
  --color-sage-100: #e2ecdb; /* shared (household) surfaces */
  --color-sage-200: #c4dec6;
  --color-terracotta-100: #fdece4; /* selected tint */
  --color-terracotta-300: #e59a7c;
  --color-terracotta-400: #c48468;
  --color-terracotta-500: #b77460; /* the one accent */
  --color-terracotta-600: #c4573d; /* negative, outflow */
  --color-terracotta-700: #a04830; /* accent hover */
  --color-terracotta-800: #7e321e;
  --color-gold-50: #faf0c4;
  --color-gold-100: #ffe9b4;
  --color-gold-200: #fdc768;
  --color-gold-250: #ffb050;
  --color-gold-300: #f0a53c;
  --color-gold-400: #d6761a; /* warning fills; never text */
  --color-gold-500: #c87838;
  --color-gold-600: #a35f14; /* gold text, any size */
  --color-gold-800: #a03c0a;
  --color-ink-warm: #3a2520;
  --color-shadow-warm: #4a3530;
  --color-mist-100: #cee4e8;

  /* Sage mist: the dock's three washes, at the Haido export's strengths (sage
   * 0.76, mist 0.66, sunlit 0.72 at the core) over the canvas. */
  --gradient-dock-sage: radial-gradient(
    circle at 50% 50%,
    rgba(196, 222, 198, 0.76) 0%,
    rgba(196, 222, 198, 0.36) 46%,
    rgba(196, 222, 198, 0) 76%
  );
  --gradient-dock-mist: radial-gradient(
    circle at 50% 50%,
    rgba(206, 228, 232, 0.66) 0%,
    rgba(206, 228, 232, 0.28) 48%,
    rgba(206, 228, 232, 0) 76%
  );
  --gradient-dock-sunlit: radial-gradient(
    circle at 50% 50%,
    rgba(250, 240, 196, 0.72) 0%,
    rgba(250, 240, 196, 0.34) 44%,
    rgba(250, 240, 196, 0) 78%
  );

  /* Deep-green insight card light washes. */
  --gradient-insight-orb-a: radial-gradient(
    circle at 50% 50%,
    rgba(150, 186, 148, 0.66) 0%,
    rgba(150, 186, 148, 0.3) 46%,
    rgba(150, 186, 148, 0) 78%
  );
  --gradient-insight-orb-b: radial-gradient(
    circle at 50% 50%,
    rgba(120, 164, 142, 0.54) 0%,
    rgba(120, 164, 142, 0.23) 46%,
    rgba(120, 164, 142, 0) 78%
  );
  --gradient-insight-orb-c: radial-gradient(
    circle at 50% 50%,
    rgba(204, 220, 172, 0.52) 0%,
    rgba(204, 220, 172, 0.22) 46%,
    rgba(204, 220, 172, 0) 78%
  );

  /* HQ card surfaces and stacked rims, matched to the approved export. */
  --gradient-insight-card: linear-gradient(
    150deg,
    var(--insight-card-start) 0%,
    var(--insight-card-mid) 52%,
    var(--insight-card-end) 100%
  );
  --gradient-insight-overlay: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 42%,
    rgba(38, 44, 26, 0.14) 100%
  );
  --gradient-insight-stack-outer: linear-gradient(180deg, #4a4f35 0%, #6e7a52 100%);
  --gradient-insight-stack-inner: linear-gradient(180deg, #57603e 0%, #7c8a5c 100%);
  --gradient-action-stack-outer: linear-gradient(180deg, #e4d8be 0%, #d8c9a8 100%);
  --gradient-action-stack-inner: linear-gradient(180deg, #f0e7d2 0%, #e4d6b7 100%);
  --card-stack-outer-opacity: 0.42;
  --card-stack-inner-opacity: 0.7;

  /* ===== Font sizes ===== */
  --text-2xs: 0.5625rem; /* 9px  — mini labels */
  --text-micro: 0.625rem; /* 10px — compact metadata / meter labels */
  --text-xs-plus: 0.6875rem; /* 11px — eyebrows */
  --text-sm-plus: 0.8125rem; /* 13px — tier taglines */
  --text-base-plus: 0.9375rem; /* 15px — button lg */
  --text-body: 1.0625rem; /* 17px — section body */
  --text-lede: 1.1875rem; /* 19px — hero lede */

  /* Named display roles retain the editorial sizes used by the shared
   * primitives without scattering arbitrary values through component CSS. */
  --text-heading-display: clamp(44px, 6vw, 88px);
  --text-heading-h1: 2.375rem; /* 38px — full-screen cards */
  --text-heading-greeting: 2.1875rem; /* 35px — HQ greeting */
  --text-heading-measure-dialog: 1.625rem; /* 26px — HQ measure picker */
  --text-heading-compact: 1.3125rem; /* 21px — dock heading */
  --text-measure-choice: 0.84375rem; /* 13.5px — picker labels */
  --text-status: 0.71875rem; /* 11.5px — compact status copy */
  --text-date-label: 0.65625rem; /* 10.5px — editorial date */
  --text-page-title: clamp(32px, 3vw, 48px);
  --text-lede-small: 0.78125rem; /* 12.5px — setup ladder */

  /* ===== Letter spacing ===== */
  --tracking-eyebrow: 0.22em;
  --tracking-caps: 0.2em;
  --tracking-label: 0.15em;
  --tracking-meta: 0.1em;
  --tracking-meter: 0.08em;
  --tracking-snug: 0.05em;
  --tracking-display: -0.01em;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.025em;
  --tracking-tightest: -0.03em;
  --tracking-activity-heading: 0.06em;

  /* ===== Border radii ===== */
  --radius-card: 0.875rem; /* 14px — KPI cards, goal cards */
  --radius-panel: 1.25rem; /* 20px — chat panels, tier cards, tables */
  --radius-section: 1.5rem; /* 24px — dashboard card */
  --radius-field: 0.6875rem; /* 11px — inputs, bank rows, chips */
  --radius-brick: 1.4375rem; /* 23px — HQ measure bricks, insight cards */
  --radius-modal: 1.625rem; /* 26px — onboarding bubble, modals */
  --radius-manual-entry: 1rem; /* 16px — compact inset account entry */
  --radius-bubble-wide: 1.75rem; /* 28px — two-column privacy bubble */
  --radius-editorial-card: 1.5625rem; /* 25px — HQ insight and measure cards */
  --radius-goal-card: 1.75rem; /* 28px — HQ planning cards */

  /* ===== HQ card grid ===== */
  /* Every card row on the HQ page (insights, measures, planning) sizes its
   * cards to the planning goal card's column: never narrower than the min,
   * never wider than the max, so one card does not stretch across the page. */
  --hq-card-min: 18.75rem; /* 300px */
  --hq-card-max: 25rem; /* 400px */
  --hq-card-gap: 1.125rem; /* 18px */

  /* ===== Form fields ===== */
  /* The spec's text field and the rhythm of a form built from it. */
  --spacing-field: 3.25rem; /* 52px — brand field height, level with the brand button */
  --spacing-field-inset: 1.125rem; /* 18px — text and addon inset inside a brand field */
  --spacing-form-stack: 1.125rem; /* 18px — between stacked fields, on the spec's step ladder */

  /* ===== Value orbs ===== */
  /* The onboarding values step's nine orbs, one per "what matters" card, as the
   * export draws them: an opaque core fading to a transparent rim, in the
   * clay / olive / gold / terracotta families. Product code reaches them as
   * `value-orb-<id>`. */
  --value-orb-healthcare: radial-gradient(
    circle at 50% 50%,
    rgba(126, 50, 30, 1) 0%,
    rgba(146, 64, 40, 1) 62%,
    rgba(168, 86, 58, 0.75) 84%,
    rgba(168, 86, 58, 0) 100%
  );
  --value-orb-passive: radial-gradient(
    circle at 50% 50%,
    rgba(56, 76, 36, 1) 0%,
    rgba(72, 94, 48, 1) 62%,
    rgba(96, 120, 66, 0.72) 84%,
    rgba(96, 120, 66, 0) 100%
  );
  --value-orb-buffer: radial-gradient(
    circle at 50% 50%,
    rgba(214, 118, 26, 1) 0%,
    rgba(230, 150, 52, 1) 62%,
    rgba(253, 199, 104, 0.7) 84%,
    rgba(253, 199, 104, 0) 100%
  );
  --value-orb-debtfree: radial-gradient(
    circle at 50% 50%,
    rgba(150, 72, 52, 1) 0%,
    rgba(183, 116, 96, 1) 62%,
    rgba(205, 146, 126, 0.7) 84%,
    rgba(205, 146, 126, 0) 100%
  );
  --value-orb-family: radial-gradient(
    circle at 50% 50%,
    rgba(90, 104, 52, 1) 0%,
    rgba(120, 136, 72, 1) 62%,
    rgba(150, 166, 96, 0.7) 84%,
    rgba(150, 166, 96, 0) 100%
  );
  --value-orb-freedom: radial-gradient(
    circle at 50% 50%,
    rgba(176, 88, 44, 1) 0%,
    rgba(206, 120, 62, 1) 62%,
    rgba(228, 158, 98, 0.7) 84%,
    rgba(228, 158, 98, 0) 100%
  );
  --value-orb-growth: radial-gradient(
    circle at 50% 50%,
    rgba(58, 66, 39, 1) 0%,
    rgba(88, 100, 56, 1) 62%,
    rgba(124, 140, 82, 0.7) 84%,
    rgba(124, 140, 82, 0) 100%
  );
  --value-orb-cashflow: radial-gradient(
    circle at 50% 50%,
    rgba(58, 66, 39, 1) 0%,
    rgba(88, 100, 56, 1) 62%,
    rgba(124, 140, 82, 0.7) 84%,
    rgba(124, 140, 82, 0) 100%
  );
  --value-orb-clarity: radial-gradient(
    circle at 50% 50%,
    rgba(196, 96, 52, 1) 0%,
    rgba(224, 136, 80, 1) 62%,
    rgba(244, 180, 124, 0.7) 84%,
    rgba(244, 180, 124, 0) 100%
  );

  /* ===== Shadows ===== */
  --shadow-card: 0 40px 80px -30px rgba(74, 53, 48, 0.25), 0 0 0 1px rgba(74, 53, 48, 0.04);
  --shadow-card-heavy: 0 40px 80px -30px rgba(74, 53, 48, 0.3), 0 0 0 1px rgba(74, 53, 48, 0.06);
  --shadow-card-dark: 0 40px 80px -30px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 28px 60px -28px rgba(74, 53, 48, 0.25);
  --shadow-nav: 0 20px 40px -12px rgba(74, 53, 48, 0.2), 0 0 0 1px rgba(74, 53, 48, 0.04);
  --shadow-shell-main: -18px 0 34px -22px rgba(74, 53, 48, 0.32);
  --shadow-btn-primary: 0 10px 24px -10px rgba(26, 43, 71, 0.4);
  --shadow-bubble: 0 20px 40px -16px rgba(26, 43, 71, 0.5);
  --shadow-tier: 0 30px 60px -24px rgba(26, 43, 71, 0.4);
  --shadow-tier-hover: 0 36px 70px -24px rgba(26, 43, 71, 0.5);
  --shadow-mustard-glow: 0 16px 32px -12px rgba(242, 182, 52, 0.5);
  --shadow-mustard-cta: 0 20px 40px -10px rgba(242, 182, 52, 0.5);
  --shadow-sun-lg: 0 0 120px rgba(255, 220, 140, 0.55), 0 0 60px rgba(247, 207, 114, 0.35);
  --shadow-sun-md: 0 0 40px rgba(255, 200, 100, 0.5);
  --shadow-sun-sm: 0 0 20px rgba(255, 200, 100, 0.4);
  --shadow-sun-xs: 0 0 10px rgba(255, 200, 100, 0.4);
  --shadow-sun-glow: 0 0 12px rgba(255, 200, 100, 0.4);
  --shadow-sun-cta: 0 0 60px rgba(255, 200, 100, 0.5);

  /* Canvas-era elevation: cards sit on warm ground, so the shadows are moss-
   * tinted and shallow, and the glass CTA carries an inset top highlight. */
  --shadow-brick: 0 18px 44px -28px rgba(58, 66, 39, 0.35);
  --shadow-measure-card: 0 1px 2px rgba(58, 66, 39, 0.05), 0 26px 50px -40px rgba(58, 66, 39, 0.5);
  --shadow-cta: 0 10px 22px -14px rgba(58, 80, 42, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-cta-lg: 0 12px 26px -16px rgba(58, 80, 42, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-glass: 0 10px 22px -18px rgba(74, 53, 48, 0.28);
  --shadow-chat-bubble:
    0 12px 28px -20px rgba(74, 53, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-glass-panel-wide:
    0 30px 70px -26px rgba(74, 53, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-glass-panel:
    0 24px 56px -22px rgba(74, 53, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-dialog-selection:
    0 40px 90px -30px rgba(74, 53, 48, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-auth-input: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --shadow-manual-entry: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --shadow-manual-entry-input: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --shadow-insight-stack-outer: 0 -6px 18px -10px rgba(74, 53, 48, 0.5);
  --shadow-insight-glass: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --shadow-notice-alert-halo: 0 0 0 8px rgba(246, 227, 218, 0.45);
  --shadow-notice-success-halo: 0 0 0 8px rgba(223, 238, 224, 0.5);
  --shadow-notice-info-halo: 0 0 0 8px rgba(58, 66, 39, 0.08);

  /* The base corner radius the shadcn components scale from. */
  --radius: 0.625rem;
}