/* Field-notes design tokens — docs/design/DESIGN_SYSTEM.md is the normative spec.
   Consumed by paper.css. Values are frozen: do not invent colours, shadows or
   sizes outside this file. */
:root {
  /* Paper surfaces */
  --paper-cream: #EEDFC7;       /* page — sampled from the skyline sky */
  --paper-sheet: #FBF4E6;       /* primary card sheet */
  --paper-sheet-warm: #F7EDDA;  /* supporting card, EN pill, nav CTA */
  --paper-sheet-light: #FDF7EA; /* supporting card on the work page */

  /* Ink */
  --ink-900: #26211C;  /* headings, strong body */
  --ink-800: #2E261F;  /* wordmark */
  --ink-700: #3A2A1E;  /* section headings */
  --ink-600: #3A2F26;  /* nav links */
  --ink-500: #51463C;  /* descriptions, metadata */
  --ink-400: #79513C;  /* rules, quiet stamps */
  --cream-100: #FFF9F1; /* text on terracotta */
  --cream-200: #F3E7D0; /* text on a dark surface */

  /* Accents */
  --terracotta-500: #C85A32; /* primary accent */
  --terracotta-600: #A84A28; /* stamp and tag ink */
  --terracotta-700: #8F3D22; /* handwriting */
  --charcoal: #3E3831;       /* primary button hover */
  --olive-500: #66704B;      /* secondary accent */
  --olive-600: #555E3C;
  --olive-300: #A8AE8B;      /* paper sheets, waves, paper-cut shapes */
  --blue-500: #3F6472;       /* blog h1 scribble, Azure ink */
  --blue-300: #C9D6DC;       /* blue supporting sheet */
  --pink-300: #E4C6BE;       /* pink supporting sheet */

  /* Stack card palettes. These follow Home.dc.html, which is newer than the
     card table in DESIGN_SYSTEM.md §2 and therefore wins. */
  --card-backend: #E7E2ED;  --card-backend-ink: #5F4B8B;
  --card-frontend: #DCE4E8; --card-frontend-ink: #46708D;
  --card-cloud: #EFCDB4;    --card-cloud-ink: #C05A2E;
  --card-tooling: #E6CFA3;  --card-tooling-ink: #8A6532;

  /* Borders */
  --border-hair: rgba(74, 52, 37, .32);
  --border-strong: rgba(74, 52, 37, .55);
  --border-card: rgba(74, 62, 61, .35);
  --border-wood: rgba(121, 81, 60, .55);
  --border-rule: rgba(74, 52, 37, .26);

  /* Tag inks (StackTag) */
  --tag-dotnet: #A84A28;  --tag-csharp: #8E4767;   --tag-azure: #3F6472;
  --tag-ai: #6A5A8C;      --tag-databases: #4E5639; --tag-payments: #8A6A20;
  --tag-system-design: #2F6B5E; --tag-career: #7A4A2E; --tag-learning: #56607F;
  --tag-react: #3F6472;   --tag-typescript: #56607F; --tag-docker: #46708D;
  --tag-redis: #9A4B33;   --tag-mvvm: #5B5F7A;

  /* Third-party brand colours — never restyled */
  --brand-dotnet: #512BD4;

  /* Semantic aliases */
  --surface-page: var(--paper-cream);
  --surface-card: var(--paper-sheet);
  --surface-card-alt: var(--paper-sheet-warm);
  --text-heading: var(--ink-900);
  --text-section-heading: var(--ink-700);
  --text-body: var(--ink-500);
  --text-nav: var(--ink-600);
  --text-hand: var(--terracotta-700);
  --text-on-accent: var(--cream-100);
  --accent: var(--terracotta-500);
  --accent-ink: var(--terracotta-600);
  --accent-secondary: var(--olive-500);
  --accent-secondary-soft: var(--olive-300);
  --focus-ring: var(--terracotta-500);

  /* Families */
  --font-display: "Zilla Slab", serif;       /* headings, card titles */
  --font-body: "Karla", sans-serif;          /* body copy, buttons */
  --font-mono: "Courier Prime", monospace;   /* nav, labels, metadata */
  --font-stamp: "Cutive Mono", monospace;    /* stamps, eyebrows, pagination */
  --font-hand: "Homemade Apple", cursive;    /* handwritten asides */
  --font-brand: "Alegreya", serif;           /* the "daniel dias" wordmark */

  /* Display and body scale */
  --text-hero: clamp(40px, 5.2vw, 72px);
  --text-section: clamp(32px, 3.6vw, 48px);
  --text-footer-heading: clamp(44px, 4.6vw, 62px);
  --text-project-title: clamp(26px, 2.6vw, 36px);
  --text-h3: clamp(23px, 2.4vw, 30px);
  --text-card-title: 23px;
  --text-hero-sub: 18.5px;
  --text-body-lg: 18px;
  --text-body-md: 16.5px;
  --text-body-sm: 15px;

  /* Mono label scale — only these three sizes exist */
  --label-fine: 13.5px;  /* fine print, card footer metadata */
  --label-base: 15px;    /* nav, meta rows */
  --label-emph: 16.5px;  /* stamps, eyebrows, pagination */

  /* Letter-spacing */
  --ls-display: -.025em;
  --ls-section: -.02em;
  --ls-nav: .13em;
  --ls-label: .14em;
  --ls-tag: .16em;
  --ls-eyebrow: .22em;
  --ls-masthead: .26em;

  /* Line-height */
  --lh-hero: 1.08;
  --lh-section: 1;
  --lh-body: 1.6;
  --lh-card: 1.55;

  /* Weights in use */
  --weight-display: 500;
  --weight-display-bold: 600;
  --weight-body: 400;
  --weight-body-md: 500;
  --weight-body-strong: 700;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 44px; --space-8: 64px;
  --gutter: clamp(20px, 3.5vw, 44px);
  --hero-pad-top: clamp(88px, 11svh, 124px);
  --hero-skyline-pull: clamp(-250px, -15vw, -32px);
  --rhythm-airy: clamp(64px, 7vw, 110px);
  --rhythm-editorial: clamp(48px, 6vw, 84px);
  --rhythm-compact: clamp(30px, 3.6vw, 52px);
  --grid-gap: 24px;
  --content-max: 1120px;
  --measure-body: 52ch;
  --measure-excerpt: 44ch;

  /* Shape */
  --radius-pill: 999px;
  --radius-nav-cta: 14px;
  --radius-button: 12px;
  --radius-sheet: 14px;
  --radius-card: 20px;
  --radius-chip: 12px;
  --radius-stamp: 4px;
  --radius-note: 8px;
  --radius-curl: 14px 14px 42px 14px;
  --radius-curl-sm: 14px 14px 28px 14px;

  /* Shadows — these two, plus the nav special case, are all that exist */
  --shadow-soft: 0 4px 0 rgba(55, 41, 29, .06), 0 12px 30px rgba(55, 41, 29, .05);
  --shadow-hover: 0 7px 0 rgba(55, 41, 29, .08), 0 18px 35px rgba(55, 41, 29, .08);
  --shadow-nav-rest: 0 3px 0 rgba(74, 52, 37, .08), inset 0 0 0 4px rgba(252, 246, 234, .35);
  --shadow-nav-scrolled: 0 4px 0 rgba(74, 52, 37, .12), 0 12px 24px rgba(74, 52, 37, .14), inset 0 0 0 4px rgba(252, 246, 234, .35);
  --shadow-note: drop-shadow(0 3px 0 rgba(55, 41, 29, .05)) drop-shadow(0 14px 26px rgba(55, 41, 29, .1));

  /* Print textures */
  --grain-dots: radial-gradient(circle, rgba(74, 62, 61, .03) 1px, transparent 1.4px);
  --grain-dots-size: 7px 7px;
  --grain-wash: radial-gradient(circle at 3px 5px, rgba(74, 62, 61, .02) 1.3px, transparent 1.8px);
  --grain-wash-size: 17px 13px;
  /* The writing sheets print a touch heavier than the stack cards. */
  --grain-dots-ink: radial-gradient(circle, rgba(74, 62, 61, .04) 1px, transparent 1.4px);
  --grain-wash-ink: radial-gradient(circle at 3px 5px, rgba(74, 62, 61, .03) 1.3px, transparent 1.8px);
  --grain-nav: radial-gradient(circle, rgba(74, 52, 37, .035) 1px, transparent 1.4px);
  --ruled-lines: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(74, 62, 61, .06) 31px 32px);
  --ruled-lines-blog: repeating-linear-gradient(to bottom, transparent 0 33px, rgba(74, 62, 61, .062) 33px 34px);

  /* Legibility halo over the artwork */
  --halo-cream: 0 0 22px rgba(238, 223, 199, .9);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 200ms;
  --dur-base: 220ms;
  --dur-slow: 250ms;
  --lift-card: translateY(-5px);
  --focus-outline: 2px solid var(--focus-ring);
  --focus-offset: 3px;
}