/* ============================================================================
   PARLATO DESIGN SYSTEM — Colors & Type
   --------------------------------------------------------------------------
   Italian for working software, not for magazines.

   Reference: Olivetti — the typewriter, the Divisumma calculator, the
   Programma 101. Vignelli's lineage. Calm, technical, neutral typography
   on beautiful machines made for serious work.

   The personality comes from material (warm almond canvas, Adriatic chrome,
   terracotta accent), proportion, and the wordmark — never from a display
   serif or a flourish.

   Layers:
     1. Primitive scale  (raw values; never reference directly in components)
     2. Semantic tokens  (--background, --primary, --fg-1; use these)
     3. shadcn aliases   (--background, --foreground, --primary, …)
     4. Type system      (Inter + JetBrains Mono + the one serif moment)
============================================================================ */

@import url('fonts/fonts.css');

/* ---------- 0. SELF-HOSTED FONTS (also declared inline so scanners that
   don't follow @import still see the brand fonts at file level) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1. PRIMITIVE SCALE -------------------------------------------- */
:root {
  /* Adriatic — chrome color. Deep, oceanic, owns the sidebar. */
  --adriatic-50:  #f1f6f9;
  --adriatic-100: #dbe8f1;
  --adriatic-200: #b6d0e2;
  --adriatic-300: #87b1cc;   /* dark mode brand */
  --adriatic-400: #538bb0;
  --adriatic-500: #2f6c95;
  --adriatic-600: #225578;   /* primary */
  --adriatic-700: #1b4361;
  --adriatic-800: #163651;   /* chrome surface */
  --adriatic-900: #112942;
  --adriatic-950: #0a1a2b;   /* deepest chrome (dark mode) */

  /* Terracotta — the only accent. Used sparingly per screen. */
  --terracotta-50:  #fbf2ec;
  --terracotta-100: #f5dfd0;
  --terracotta-200: #ebbda0;
  --terracotta-300: #de9871;
  --terracotta-400: #d07a4f;
  --terracotta-500: #c45f36;   /* accent default */
  --terracotta-600: #aa4d28;
  --terracotta-700: #874023;
  --terracotta-800: #6a3520;
  --terracotta-900: #522a1c;

  /* Apricot — terracotta on the chrome (lifts for legibility on Adriatic). */
  --apricot-300: #efa75c;   /* accent on dark/chrome */
  --apricot-400: #e88a36;

  /* Almond — canvas and surfaces. Warm oat, not yellow, not Claude cream. */
  --almond-50:  #faf6ec;    /* lifted surface */
  --almond-100: #f5efe2;    /* canvas */
  --almond-150: #ede5d2;
  --almond-200: #e3d9c2;
  --almond-300: #cfc1a3;
  --almond-400: #b3a283;

  /* Sand & espresso — neutral ink scale */
  --sand-400: #95846a;       /* tertiary ink, hairline rule */
  --sand-500: #75674f;
  --sand-600: #5a5145;       /* secondary ink */
  --sand-700: #423a31;
  --espresso-800: #211d18;   /* primary ink */
  --espresso-900: #15120e;

  /* State — kept for accessibility, used as text/outline only, never as fills */
  --pistachio-500: #6f8a3f;  /* success */
  --pistachio-300: #a9be76;  /* success on dark */
  --apricot-500:   #d97020;  /* warning */
  --amarena-500:   #962e28;  /* error/destructive */
  --amarena-300:   #df837c;  /* error on dark */

  /* Night — warm midnight for dark mode canvas */
  --night-canvas: #1a1813;
  --night-surface: #25201a;
  --night-rule: #423a31;
}

/* ---------- 2. SEMANTIC TOKENS (light) ----------------------------------- */
:root {
  /* Surfaces */
  --bg-page:        var(--almond-100);   /* canvas */
  --bg-surface:     var(--almond-50);    /* card / panel */
  --bg-surface-2:   var(--almond-150);   /* hover / inset */
  --bg-surface-3:   var(--almond-200);
  --bg-chrome:      var(--adriatic-800); /* sidebar, dark blocks */
  --bg-overlay:     rgba(22, 54, 81, 0.55);

  /* Ink — warm espresso, never pure black */
  --fg-1:           var(--espresso-800);
  --fg-2:           var(--sand-600);
  --fg-3:           var(--sand-400);
  --fg-4:           var(--almond-300);
  --fg-on-chrome:   var(--almond-100);
  --fg-on-chrome-2: #a8b5c4;

  /* Brand */
  --brand:          var(--adriatic-600);
  --brand-hover:    var(--adriatic-700);
  --brand-press:    var(--adriatic-800);
  --brand-subtle:   var(--adriatic-50);
  --brand-fg:       var(--almond-100);
  --chrome:         var(--adriatic-800);
  --chrome-fg:      var(--almond-100);
  --chrome-fg-2:    #a8b5c4;

  /* Accent — terracotta. Lifts to apricot on chrome/dark. */
  --accent:         var(--terracotta-500);
  --accent-hover:   var(--terracotta-600);
  --accent-subtle:  var(--terracotta-50);
  --accent-fg:      var(--almond-100);
  --accent-on-chrome: var(--apricot-300);

  /* Semantic state — text/outline use only, never background fills */
  --success:        var(--pistachio-500);
  --warning:        var(--apricot-500);
  --danger:         var(--amarena-500);
  --info:           var(--adriatic-500);

  /* Rules — Vignelli canon: 2pt regions, 1pt sections, 0.5pt items */
  --rule-heavy:     2px solid var(--espresso-800);
  --rule-medium:    1px solid var(--espresso-800);
  --rule-light:     0.5px solid var(--sand-400);
  --rule-chrome:    1px solid rgba(245, 239, 226, 0.12);
  --border:         var(--sand-400);
  --border-strong:  var(--espresso-800);
  --divider:        var(--sand-400);

  /* Input — hairline only, no fill */
  --input-bg:       transparent;
  --input-border:   var(--sand-400);
  --input-fg:       var(--fg-1);
  --input-placeholder: var(--sand-400);
  --ring:           var(--accent);

  /* Radii — one value, applied where corners soften */
  --radius-none: 0;
  --radius:      4px;
  --radius-full: 9999px;   /* avatars / dots only */

  /* Shadows — virtually none. Rules and white space do structural work.
     Only popovers and modals carry an actual shadow. */
  --shadow-none: none;
  --shadow-popover: 0 12px 28px -10px rgba(22, 54, 81, 0.18);
  --shadow-modal:   0 24px 60px -16px rgba(22, 54, 81, 0.24);

  /* Spacing — 8-based grid, no half-steps */
  --space-0: 0;
  --space-1: 4px;       /* icon-to-label gap, reserved */
  --space-2: 8px;
  --space-3: 8px;
  --space-4: 16px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* Motion */
  --ease-out:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 100ms;
  --dur:      160ms;
  --dur-slow: 240ms;
}

/* ---------- 2b. SEMANTIC TOKENS (dark) ------------------------------------ */
:root[data-theme="dark"],
.dark {
  --bg-page:        var(--night-canvas);
  --bg-surface:     var(--night-surface);
  --bg-surface-2:   #2e2820;
  --bg-surface-3:   #3a342a;
  --bg-chrome:      var(--adriatic-950);   /* deepest Adriatic */
  --bg-overlay:     rgba(0, 0, 0, 0.6);

  --fg-1:           var(--almond-100);
  --fg-2:           #b8ac95;
  --fg-3:           #7c7263;
  --fg-4:           var(--sand-700);
  --fg-on-chrome:   var(--almond-100);
  --fg-on-chrome-2: #7c8fa3;

  --brand:          var(--adriatic-300);
  --brand-hover:    var(--adriatic-200);
  --brand-fg:       var(--espresso-900);
  --chrome:         var(--adriatic-950);

  --accent:         var(--apricot-300);
  --accent-hover:   var(--apricot-400);
  --accent-fg:      var(--espresso-900);
  --accent-on-chrome: var(--apricot-300);

  --success:        var(--pistachio-300);
  --warning:        var(--apricot-300);
  --danger:         var(--amarena-300);

  --rule-heavy:     2px solid var(--almond-100);
  --rule-medium:    1px solid var(--sand-500);
  --rule-light:     0.5px solid var(--night-rule);
  --border:         var(--night-rule);
  --border-strong:  var(--almond-100);
  --divider:        var(--night-rule);

  --input-border:   var(--night-rule);
  --input-placeholder: var(--fg-3);
}

/* ---------- 3. SHADCN ALIASES --------------------------------------------- */
:root {
  --background:           var(--bg-page);
  --foreground:           var(--fg-1);
  --card:                 var(--bg-surface);
  --card-foreground:      var(--fg-1);
  --popover:              var(--bg-surface);
  --popover-foreground:   var(--fg-1);
  --primary:              var(--brand);
  --primary-foreground:   var(--brand-fg);
  --secondary:            var(--bg-surface-2);
  --secondary-foreground: var(--fg-1);
  --muted:                var(--bg-surface-2);
  --muted-foreground:     var(--fg-2);
  --accent-bg:            var(--accent-subtle);
  --accent-foreground:    var(--accent-hover);
  --destructive:          var(--danger);
  --destructive-foreground: #ffffff;
  --input:                var(--input-border);
  --ring-shad:            var(--ring);
  --radius-shad:          var(--radius);
}

/* ---------- 4. TYPOGRAPHY ------------------------------------------------- */
:root {
  /* Families */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, sans-serif;        /* same family — scale + weight do the job */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-brand:   'Instrument Serif', Georgia, serif;        /* wordmark only */

  /* Type sizes */
  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-md:   13px;       /* dense data */
  --fs-base: 14px;       /* default body */
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  36px;
  --fs-5xl:  44px;       /* mobile page title */
  --fs-6xl:  56px;       /* desktop page title */
  --fs-7xl:  72px;       /* hero numerics */

  /* Line heights */
  --lh-tight: 0.95;
  --lh-snug:  1.2;
  --lh-base:  1.5;

  /* Tracking */
  --tracking-display: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-caps:    0.14em;
  --tracking-caps-wide: 0.16em;

  /* Weights */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-extrabold: 800;
}

/* ---------- Semantic type classes ----------------------------------------- */
/* Apply directly: <h1 class="t-display">Today.</h1> */

.t-brand {
  font-family: var(--font-brand);
  font-weight: var(--w-regular);
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--brand);
}
.t-brand .b { color: var(--accent); font-style: italic; }

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.t-display .accent { color: var(--accent); }

.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-4xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Section label — the workhorse small caps */
.t-section {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide);
  color: var(--fg-1);
}
.t-overline {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-2xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--fg-1);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--fg-2);
}

/* Numerics — JetBrains Mono. The Olivetti gesture. */
.t-num {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.t-num .unit { color: var(--accent); }

.t-num-hero {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: var(--fs-7xl);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.t-num-display {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: var(--fs-5xl);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.t-meta {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--fg-2);
}

/* ---------- Base element defaults ----------------------------------------- */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { font-feature-settings: 'cv11' 1, 'ss01' 1, 'ss03' 1; }

::selection {
  background: var(--terracotta-200);
  color: var(--espresso-900);
}
:root[data-theme="dark"] ::selection,
.dark ::selection {
  background: var(--terracotta-700);
  color: var(--almond-100);
}