/*
 * tokens.css — canonical design tokens from DesignStyle.md.
 * Variants only override the values declared here; never add new selectors.
 */

:root {
  /* ---------- Color: Core ---------- */
  --c-bottle-green: #1D5A17;
  --c-bottle-deep:  #14400F;
  --c-leaf:         #4A7C59;
  --c-ivory:        #FBF8F1;
  --c-white:        #FFFFFF;

  /* ---------- Color: Lemon accent ---------- */
  --c-lemon-soft:   #F4E48A;
  --c-lemon:        #EBD15B;
  --c-lemon-rind:   #C9A92C;

  /* ---------- Color: Neutrals & state ---------- */
  --c-ink:          #2B2A26;
  --c-ink-soft:     #5C594F;
  --c-lace:         #F5EDD8;
  --c-rule:         #D9D2BD;
  --c-success:      #3F7A4D;
  --c-error:        #8C2A2A;

  /* ---------- Semantic surfaces (variants can re-map) ---------- */
  --surface-page:   var(--c-ivory);
  --surface-card:   var(--c-ivory);
  --surface-inset:  var(--c-lace);
  --surface-deep:   var(--c-bottle-green);
  --surface-deeper: var(--c-bottle-deep);
  --ink-on-page:    var(--c-ink);
  --ink-on-page-soft: var(--c-ink-soft);
  --ink-on-deep:    var(--c-ivory);
  --rule-color:     var(--c-rule);

  /* Accent (eyebrows, form labels, ghost-button text, dropzone title).
   * Variants can flip this when the page surface darkens. */
  --accent:         var(--c-bottle-green);
  --accent-soft:    var(--c-leaf);

  /* Button colors — semantic so variants can re-skin them. */
  --btn-primary-bg:        var(--c-bottle-green);
  --btn-primary-fg:        var(--c-ivory);
  --btn-primary-bg-hover:  var(--c-bottle-deep);
  --btn-secondary-border:  var(--c-bottle-green);
  --btn-secondary-fg:      var(--c-bottle-green);
  --btn-secondary-bg-hover: var(--c-lace);

  /* Chip / pill colors. */
  --chip-bg:           var(--c-lemon-soft);
  --chip-fg:           var(--c-ink);
  --chip-bg-hover:     var(--c-lemon);
  --chip-neutral-fg:   var(--c-bottle-green);
  --chip-neutral-border: var(--c-leaf);

  /* ---------- Type families ---------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* Semantic font roles (variants can re-route any role to any family) */
  --font-hero:     var(--font-display);
  --font-heading:  var(--font-display);
  --font-subhead:  var(--font-serif);
  --font-lede:     var(--font-serif);
  --font-body:     var(--font-sans);
  --font-ui:       var(--font-sans);
  --font-eyebrow:  var(--font-sans);

  /* ---------- Type scale ---------- */
  --fs-display:  64px;
  --fs-h1:       44px;
  --fs-h2:       28px;
  --fs-h3:       24px;
  --fs-lede:     20px;
  --fs-body:     16px;
  --fs-small:    13px;
  --fs-eyebrow:  12px;

  --lh-display:  1.1;
  --lh-h1:       1.15;
  --lh-h2:       1.2;
  --lh-h3:       1.3;
  --lh-lede:     1.5;
  --lh-body:     1.6;
  --lh-small:    1.5;
  --lh-eyebrow:  1;

  --ls-display:  0.08em;
  --ls-h1:       0.06em;
  --ls-h2:       0.10em;
  --ls-h3:       0;
  --ls-lede:     0;
  --ls-body:     0;
  --ls-small:    0.02em;
  --ls-eyebrow:  0.18em;

  --fw-display:    400;
  --fw-heading:    400;
  --fw-subhead:    500;
  --fw-body:       400;
  --fw-ui-medium:  500;
  --fw-ui-strong:  600;

  /* ---------- Spacing scale (8px base) ---------- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* Semantic spacing */
  --space-card-padding:    var(--space-6);
  --space-section-gap:     var(--space-9);
  --space-section-gap-lg:  var(--space-10);
  --space-page-gutter:     var(--space-7);
  --space-page-gutter-sm:  var(--space-5);

  /* ---------- Radii ---------- */
  --radius-button:      14px 14px 2px 2px;   /* arched primary */
  --radius-button-flat: 2px;                 /* lintel secondary */
  --radius-card:        12px;
  --radius-photo:       2px;
  --radius-input:       6px;
  --radius-pill:        999px;
  --arch-radius:        50% 30%;              /* arched photo cards */
  --arch-radius-tight:  50% 25%;              /* arched dropzone */

  /* ---------- Shadows ---------- */
  --shadow-card:        0 8px 24px rgba(22, 56, 35, 0.10);
  --shadow-button-hover: 0 6px 18px rgba(22, 56, 35, 0.18);
  --shadow-photo-hover: 0 10px 30px rgba(22, 56, 35, 0.18);

  /* ---------- Borders ---------- */
  --border-hairline:   1px solid var(--rule-color);
  --border-inset-ivory: 1px solid var(--c-ivory);

  /* ---------- Motion ---------- */
  --ease-default: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:   200ms;
  --dur-base:   240ms;
  --dur-hover:  300ms;
  --dur-page:   320ms;

  /* ---------- Breakpoints (used by media queries below in base.css) ---------- */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;

  /* ---------- Layout ---------- */
  --content-max:  1200px;

  /* ---------- Ornament scale (variants tune this) ---------- */
  --ornament-divider-width:   480px;
  --ornament-divider-ornate-width: 640px;
  --ornament-branch-width:    420px;
  --ornament-corner-size:     180px;
  --ornament-lemon-pill:      22px;
  --texture-hero-opacity:     0.08;
  --texture-hero-tile:        512px;

  /* Ornament source URLs — variants can swap these to ivory derivatives
   * when the page surface is dark. */
  --asset-divider:         url('/static/derived/motif-divider-ink.png');
  --asset-divider-ornate:  url('/static/derived/motif-divider-ornate-ink.png');
  --asset-corner-tl:       url('/static/design-assets/motif-corner-tl-800.png');
  --asset-dropzone-branch: url('/static/derived/motif-lemon-branch-ink.png');
}