/* The Yellow Otter. Design tokens. See DESIGN-SYSTEM.md for rules. */
:root {
  /* Surface */
  --surface:          #F4EDDD; /* brand cream, the dominant field */
  --surface-raised:   #FBF7EE; /* cards, inputs, photo plates, menus */
  --surface-sunken:   #EAE1CC; /* alternating bands, secondary hover */
  --surface-inverse:  #1F2A44; /* brand navy, footer */

  /* Text */
  --text-primary:     #1A1A1A; /* brand ink */
  --text-secondary:   #57514A;
  --text-inverse:     #F4EDDD;
  --text-inverse-secondary: #C4BDAA;
  --text-accent:      #7A5200; /* the only amber family value allowed as text on cream */
  --text-disabled:    #8A8373;

  /* Border */
  --border-subtle:    #DDD2B8; /* decorative dividers only */
  --border-control:   #7A735F; /* input borders, 3:1 on all creams */
  --border-strong:    #1A1A1A; /* badge style linework */

  /* Accent. Text on accent is always --text-primary. */
  --accent:           #E8A317;
  --accent-hover:     #D9960F;
  --accent-pressed:   #C2850A;

  /* Focus */
  --focus-ring:         #1F2A44; /* on cream */
  --focus-ring-inverse: #E8A317; /* on navy */

  /* Semantic: text and border / surface */
  --success: #2E5B3C;  --success-surface: #E2E8D2;
  --warning: #7A5200;  --warning-surface: #F6E4B8;
  --error:   #9A2B1E;  --error-surface:   #F4DCD0;

  /* Type families */
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;      /* 600, 700, 800 */
  --font-body: "Atkinson Hyperlegible Next", Verdana, system-ui, sans-serif; /* 400, 600 */

  /* Type sizes. Fluid from 360px to 1280px viewport. */
  --size-display: clamp(3rem, 1.8261rem + 5.2174vw, 6rem);          /* 48 to 96 */
  --size-h1:      clamp(2.5rem, 1.7174rem + 3.4783vw, 4.5rem);      /* 40 to 72 */
  --size-h2:      clamp(2rem, 1.5109rem + 2.1739vw, 3.25rem);       /* 32 to 52 */
  --size-h3:      clamp(1.625rem, 1.3804rem + 1.0870vw, 2.25rem);   /* 26 to 36 */
  --size-h4:      clamp(1.375rem, 1.2772rem + 0.4348vw, 1.625rem);  /* 22 to 26 */
  --size-body-lg: clamp(1.1875rem, 1.1386rem + 0.2174vw, 1.3125rem);/* 19 to 21 */
  --size-body:    clamp(1.0625rem, 1.0380rem + 0.1087vw, 1.125rem); /* 17 to 18 */
  --size-small:   0.9375rem; /* 15 */
  --size-caption: 0.8125rem; /* 13 */
  --size-label:   1rem;      /* 16, buttons and eyebrows */

  /* Space. Four pixel base. */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* Grid */
  --grid-max: 1200px;
  --grid-gutter: 16px;  /* 24px from 768, 32px from 1024 */
  --grid-margin: 20px;  /* 40px from 768, 80px from 1024 */

  /* Form */
  --radius-sm: 4px;  /* tags, checkboxes */
  --radius-md: 6px;  /* buttons, inputs, cards */
  --radius-lg: 8px;  /* photographs, plates. The maximum. */
  --line: 2px;       /* badge style linework */
  --control: 48px;   /* button and input height, minimum touch target */

  /* Elevation. Only for surfaces that float: mobile menu, sticky bar. */
  --shadow-float: 0 1px 2px #1A1A1A14, 0 4px 16px #1A1A1A1A;

  /* Motion */
  --duration: 200ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
}