/* Design tokens, copied verbatim from docs/design/design-system/tokens/ (colors, typography, spacing, effects).  Update them by
   copying again when the Software Engineer replaces the design files; don't edit values here. */

:root {
  /* Navy (night sky + sapphire) */
  --navy-950: #0E1A33;
  --navy-900: #14254A;
  --navy-850: #1B2A4D;
  --navy-700: #1E3A78;
  --navy-600: #34467A;
  --navy-300: #93AAD9;
  --navy-200: #AFC0E4;
  --navy-150: #C9D4EA;
  --navy-100: #D5DEF1;
  --navy-50:  #E3E9F6;
  --navy-25:  #F2F5FB;

  /* Gold (leaf) */
  --gold-900: #6B4F12;
  --gold-700: #A07C30;
  --gold-650: #A8852F;
  --gold-500: #C9A24A;
  --gold-450: #D4AF58;
  --gold-400: #E2BE66;
  --gold-350: #E4C372;
  --gold-300: #E8C874;
  --gold-250: #F0D896;
  --gold-200: #F4DC96;
  --gold-150: #F6E2A4;
  --gold-100: #FCEFC8;
  --gold-50:  #FBF1D6;

  /* Walnut (leather binding) */
  --walnut-900: #3B2314;
  --walnut-700: #5C3A21;
  --walnut-300: #E6D2B5;
  --walnut-100: #EFE3D3;
  --walnut-50:  #F8EFD9;

  /* Ruby (the gem; urgency) */
  --ruby-950: #3A0410;
  --ruby-800: #6E1A2C;
  --ruby-700: #9A1429;
  --ruby-600: #B31C31;
  --ruby-400: #E84A5D;
  --ruby-200: #FFB0BA;
  --ruby-150: #FFD6DB;
  --ruby-100: #F6D9DF;
  --ruby-50:  #F5E4E8;

  /* Green (done) */
  --green-800: #2F5E46;
  --green-700: #2F6B4F;
  --green-50:  #E2EFE7;

  /* Paper */
  --paper-0:   #FFFFFF;
  --paper-25:  #FBF9F4;
  --paper-40:  #FBF7EF;
  --paper-50:  #F7F4EC;
  --paper-100: #F1ECDF;
  --paper-150: #EFEAE0;
  --paper-200: #ECE6D8;
  --paper-300: #E4DECF;
  --paper-400: #D6CFC0;
  --paper-500: #CFC8B6;
  --paper-700: #9A9384;
  --paper-800: #6F6858;

  /* Ink */
  --ink-900: #121A2E;
  --ink-700: #333C50;
  --ink-500: #525C70;

  /* Semantic */
  --surface-page: var(--paper-50);
  --surface-card: var(--paper-0);
  --surface-sunken: var(--paper-25);
  --surface-tint: var(--paper-100);
  --surface-chrome: var(--navy-950);
  --surface-selected: var(--navy-700);
  --border-card: var(--paper-300);
  --border-row: var(--paper-150);
  --border-input: var(--paper-500);
  --text-body: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-heading: var(--walnut-900);
  --text-title: var(--navy-950);
  --text-link: var(--navy-700);
  --text-link-hover: var(--navy-900);
  --text-on-chrome: #FFFFFF;
  --text-on-chrome-muted: var(--navy-200);
  --text-on-chrome-soft: var(--navy-100);
  --text-on-chrome-accent: var(--gold-200);
  --icon-on-chrome: var(--gold-300);
  --data-primary: var(--navy-700);
  --data-secondary: var(--navy-300);
  --data-track: var(--paper-200);
  --status-new-bg: var(--navy-50);
  --status-new-fg: var(--navy-900);
  --status-open-bg: var(--walnut-100);
  --status-open-fg: var(--walnut-900);
  --status-overdue-bg: var(--ruby-50);
  --status-overdue-fg: var(--ruby-800);
  --status-done-bg: var(--green-50);
  --status-done-fg: var(--green-800);
}

:root {
  --font-display: 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Libre Franklin', system-ui, sans-serif;
  /* Caslon ships 400 + 700; display weight 600 in components resolves to 700 */
  --weight-display: 700;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Display (serif, 600) */
  --type-hero: 52px;
  --type-title-xl: 36px;
  --type-title-lg: 32px;
  --type-title-md: 30px;
  --type-title-sm: 21px;
  --type-section: 20px;
  --type-brand: 19px;
  --type-stat-xl: 48px;
  --type-stat: 36px;
  --type-stat-phone: 32px;

  /* Body (sans) */
  --type-lead: 18px;
  --type-body-lg: 16px;
  --type-body: 15px;
  --type-body-sm: 14px;
  --type-meta: 13px;
  --type-caption: 12px;
  --type-micro: 11px;

  --leading-tight: 1.15;
  --leading-snug: 1.2;
  --leading-body: 1.5;
  --leading-note: 1.45;
  --tracking-eyebrow: 0.1em;
  --tracking-label: 0.08em;
  --tracking-table: 0.05em;
}

:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-36: 36px;

  --radius-xs: 2px;
  --radius-tag: 6px;
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-choice: 12px;
  --radius-card: 14px;
  --radius-form: 16px;
  --radius-pill: 18px;
  --radius-fab: 26px;

  --control-h: 44px;
  --control-h-field: 46px;
  --control-h-field-phone: 48px;
  --control-h-lg: 52px;
  --chip-h: 36px;
  --sidebar-w: 248px;
  --tabbar-h: 78px;
  --gold-rule: 3px;

  --shadow-card: 0 1px 2px rgba(14,26,51,0.06);
  --shadow-form: 0 1px 3px rgba(14,26,51,0.06);
  --shadow-ruby: 0 4px 12px rgba(110,26,44,0.28);
  --shadow-ruby-lg: 0 6px 16px rgba(110,26,44,0.25);
  --shadow-walnut: 0 4px 12px rgba(59,35,20,0.28);
  --shadow-walnut-lg: 0 6px 16px rgba(59,35,20,0.25);
  --shadow-selected: 0 4px 12px rgba(14,26,51,0.25);
  --shadow-fab: 0 6px 16px rgba(14,26,51,0.25), 0 0 18px rgba(230,195,110,0.55);
  --shadow-gold-btn: 0 0 0 1px rgba(201,162,74,0.4), 0 0 16px rgba(230,195,110,0.5);
  --shadow-sheet: 0 -6px 16px rgba(14,26,51,0.08);
  --ring-gold: inset 0 0 0 1.5px #C9A24A; /* @kind shadow */
  --ring-nav-active: inset 3px 0 0 #E2BE66; /* @kind shadow */
}

:root {
  --gradient-gold: linear-gradient(90deg,#A07C30 0%,#D4AF58 18%,#F6E2A4 32%,#D4AF58 46%,#A8852F 62%,#E4C372 80%,#A07C30 100%); /* @kind color */
  --gradient-gold-text: linear-gradient(90deg,#CFAE5E 0%,#F0D896 25%,#FCEFC8 40%,#E0BE6A 60%,#F0D896 80%,#CFAE5E 100%);
  --glow-gold: 0 0 0 1px rgba(201,162,74,0.35), 0 0 14px rgba(230,195,110,0.45);
  --shimmer-duration: 9s; /* @kind other */
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
.gold {
  background: var(--gradient-gold);
  background-size: 200% 100%;
  background-repeat: repeat-x;
  animation: shimmer var(--shimmer-duration) linear infinite;
  box-shadow: var(--glow-gold);
}
.gold-text {
  background: var(--gradient-gold-text);
  background-size: 200% 100%;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer var(--shimmer-duration) linear infinite;
  filter: drop-shadow(0 0 6px rgba(240,216,150,0.45));
}
@media (prefers-reduced-motion: reduce) { .gold, .gold-text { animation: none; } }