/* ============================================================
   Pecas Design System — Colors & Type
   ------------------------------------------------------------
   Single source of truth for design tokens. Every component
   must reference these variables, never hardcode values.
   If a needed token doesn't exist, add it here rather than
   inlining a one-off.

   Usage:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lexend+Deca:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ========== COLOR — raw palette ==========
     Named after what they are, not where they're used.
     Keep these stable; re-map semantic vars instead. */

  /* Olive — primary brand */
  --olive-50:  #F5F5EC;
  --olive-100: #E9EAD6;
  --olive-200: #D3D5AE;
  --olive-300: #B4B884;
  --olive-400: #95995E;
  --olive-500: #77794A;  /* brand core */
  --olive-600: #5E6139;
  --olive-700: #484A2C;
  --olive-800: #33351F;
  --olive-900: #1F2013;

  /* Sienna — accent (burnt orange, warm) */
  --sienna-50:  #FBF1E9;
  --sienna-100: #F6DFCB;
  --sienna-200: #EEBE98;
  --sienna-300: #E59C65;
  --sienna-400: #D97B3F;
  --sienna-500: #C45A22;  /* accent core */
  --sienna-600: #9E4619;
  --sienna-700: #763312;
  --sienna-800: #4F220C;
  --sienna-900: #2B1205;

  /* Sand — warm neutrals (paper/bone) */
  --sand-50:  #FAF7F1;  /* canvas / page bg */
  --sand-100: #F3EEE2;
  --sand-200: #E8E0CB;
  --sand-300: #D4C8A9;
  --sand-400: #B5A683;
  --sand-500: #8E8264;
  --sand-600: #6B614A;
  --sand-700: #4D4534;
  --sand-800: #2F2A1F;
  --sand-900: #1A170F;

  /* Ink — cool near-blacks (type, structure) */
  --ink-50:  #F3F3F0;
  --ink-100: #E3E3DC;
  --ink-200: #C4C4B8;
  --ink-300: #9A9A8B;
  --ink-400: #6D6D5E;
  --ink-500: #484A3F;
  --ink-600: #32332C;
  --ink-700: #23241F;
  --ink-800: #171814;
  --ink-900: #0C0D0A;

  /* Semantic accents — each has a -100 surface tint, -500 core, and
     -600/-700 darker shades for icons + text on the -100 surface.
     If a future component needs -200/-300/-400 mid-tones, add them
     here rather than inlining a one-off color. */
  --sky-500:    #4C7FA1;   /* info / weather */
  --sky-100:    #DCE8F1;
  --sky-600:    #3F6886;
  --sky-700:    #2E4D6B;
  --moss-500:   #4A7A4D;   /* success / confirmed */
  --moss-100:   #DBE8DB;
  --moss-600:   #3B6440;
  --moss-700:   #2C4D31;
  --ember-500:  #B8432A;   /* danger / alert */
  --ember-100:  #F3D9D1;
  --ember-600:  #963421;
  --ember-700:  #732618;
  --honey-500:  #D9A441;   /* warning / pending */
  --honey-100:  #F7E8C4;
  --honey-600:  #B58432;
  --honey-700:  #8C6520;

  /* ========== COLOR — semantic tokens ==========
     Always reference these in components. */

  /* Surfaces */
  --bg:         var(--sand-50);
  --bg-raised: #FFFFFF;
  --bg-sunken:  var(--sand-100);
  --bg-inverse: var(--ink-800);

  /* Borders / rules */
  --border:        var(--sand-200);
  --border-strong: var(--sand-300);
  --border-muted:  var(--sand-100);

  /* Foreground / type */
  --fg1: var(--ink-800);  /* primary text */
  --fg2: var(--ink-500);  /* secondary text */
  --fg3: var(--ink-400);  /* tertiary / meta */
  --fg4: var(--ink-300);  /* placeholder / disabled */
  --fg-inverse: var(--sand-50);

  /* Brand accents */
  --accent:          var(--olive-600);
  --accent-hover:    var(--olive-700);
  --accent-press:    var(--olive-800);
  --accent-soft:     var(--olive-100);
  --accent-on:       #FFFFFF;

  --highlight:       var(--sienna-500);   /* use sparingly — CTA, key callouts */
  --highlight-hover: var(--sienna-600);
  --highlight-soft:  var(--sienna-100);
  --highlight-on:    #FFFFFF;

  /* Status */
  --success:     var(--moss-500);
  --success-bg:  var(--moss-100);
  --danger:      var(--ember-500);
  --danger-bg:   var(--ember-100);
  --warning:     var(--honey-500);
  --warning-bg:  var(--honey-100);
  --info:        var(--sky-500);
  --info-bg:     var(--sky-100);

  /* Focus ring */
  --focus: color-mix(in oklch, var(--sienna-500) 60%, transparent);

  /* ========== TYPE ========== */
  --font-display: 'Lexend Deca', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — modest 1.2 ratio; product-forward, not editorial-huge */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;   /* body default */
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 64px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;

  /* ========== SPACING (4px base) ========== */
  --sp-0:  0px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* ========== RADIUS ========== */
  --radius-xs: 3px;
  --radius-sm: 4px;    /* default for most UI */
  --radius-md: 6px;
  --radius-lg: 10px;   /* cards */
  --radius-xl: 16px;   /* modals, large surfaces */
  --radius-full: 999px;

  /* ========== SHADOWS ==========
     Warm-tinted (olive-ink mix), never pure black. */
  --shadow-xs: 0 1px 0 0 rgba(47, 42, 31, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(47, 42, 31, 0.06), 0 1px 1px 0 rgba(47, 42, 31, 0.04);
  --shadow-md: 0 2px 4px -1px rgba(47, 42, 31, 0.08), 0 4px 10px -2px rgba(47, 42, 31, 0.06);
  --shadow-lg: 0 6px 14px -4px rgba(47, 42, 31, 0.12), 0 12px 28px -6px rgba(47, 42, 31, 0.08);
  --shadow-xl: 0 12px 28px -8px rgba(47, 42, 31, 0.18), 0 28px 60px -12px rgba(47, 42, 31, 0.12);
  --shadow-inset: inset 0 1px 2px 0 rgba(47, 42, 31, 0.06);

  /* Elevation ring (used alongside shadow on cards) */
  --ring-hairline: 0 0 0 1px var(--border);

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-med:    220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   Semantic base styles — apply by element where useful
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg1);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--text-5xl); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg2); }

p  { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg1); text-wrap: pretty; margin: 0; }
small { font-size: var(--text-sm); color: var(--fg2); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--olive-700);
}

/* Utility — eyebrow / overline label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--sienna-600);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--accent) 30%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); }

::selection {
  background: var(--sienna-200);
  color: var(--ink-900);
}