/* ==========================================================================
   JM · Design Tokens — v2.2.0 "Canvas"
   Light only (v2.2 removed the dark theme). Three tiers, one-way dependency:
   primitive → semantic → component. Source of truth: assets/tokens/tokens.json.
   Every text pair meets WCAG 2.2 AA (≥ 4.5:1); ratios are in guidelines.html.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVES ---------- */

  /* Paper & ink — the canvas and the marker */
  --paper-0:   #FFFFFF;
  --paper-50:  #F7F3EA;   /* page canvas */
  --paper-100: #EFEADD;
  --paper-200: #E3DCCB;
  --paper-300: #D3CAB5;
  --ink-400:   #8E8C80;
  --ink-500:   #66655B;
  --ink-600:   #4E4D44;
  --ink-800:   #2A2922;
  --ink-900:   #16150F;   /* outlines, text */
  --ink-950:   #0E0D09;

  /* Sticky notes — FigJam-flavoured fills, always with ink text */
  --sticky-yellow: #FFD95A;
  --sticky-lilac:  #C9B8FF;
  --sticky-mint:   #B5EBDD;
  --sticky-pink:   #FFC4DE;
  --sticky-coral:  #FF8A66;
  --sticky-sky:    #A9D4FF;

  /* Strong hues — text-safe versions of the stickies */
  --violet-600: #6445D6;   /* from the v1 lilac initials; 5.6:1 on paper */
  --violet-300: #B9A4FF;   /* dark mode */
  --teal-700:   #0B6F6B;   /* from Arpoador "mar"; 5.4:1 on paper */
  --teal-300:   #7FD8CB;
  --coral-700:  #B83A0E;   /* from Arpoador "pôr do sol"; 5.2:1 on paper */
  --coral-400:  #FF8A66;

  /* Functional */
  --success: #2E7A3C;
  --warning: #8A5E0B;
  --danger:  #C53A2E;

  /* Type */
  --font-display: "Brygada 1918", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hand:    "Mynerve", "Bradley Hand", "Segoe Print", cursive;

  --fs-12: 0.75rem;  --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem;   --fs-24: 1.5rem;   --fs-32: 2rem;
  --fs-40: 2.5rem;   --fs-56: 3.5rem;    --fs-72: 4.5rem;   --fs-96: 6rem;

  --lh-tight: 1.0;
  --lh-snug:  1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* Spacing — 4pt base */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;  --sp-5: 1.5rem;
  --sp-6: 2rem;    --sp-7: 3rem;   --sp-8: 4rem;    --sp-9: 6rem;  --sp-10: 8rem;

  /* Radius — friendlier than v1, still crisp */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 14px;
  --radius-full: 999px;

  --bw-hair: 1px;
  --bw-thick: 1px;   /* v2.1: fine lines everywhere */

  /* Motion */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms; --dur-5: 1200ms;
  --ease-standard:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 1.5rem;
  --columns: 12;

  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-cursor: 1100;

  /* ---------- 2. SEMANTIC — light (primary) ---------- */
  --color-bg:            var(--paper-50);
  --color-bg-elevated:   var(--paper-0);
  --color-bg-sunken:     var(--paper-100);
  --color-bg-inverse:    var(--ink-900);

  --color-text:          var(--ink-900);   /* 16.5:1 */
  --color-text-muted:    var(--ink-600);   /* 7.7:1 */
  --color-text-subtle:   var(--ink-500);   /* 5.3:1 */
  --color-text-inverse:  var(--paper-50);
  --color-text-on-brand: var(--paper-0);   /* 18.3:1 on ink */

  /* Brand = ink, the marker. Colour lives in the stickies and violet. */
  --color-brand:         var(--ink-900);
  --color-brand-hover:   var(--ink-800);
  --color-brand-active:  var(--ink-950);
  --color-brand-subtle:  #EEE8FF;
  --color-brand-muted:   var(--paper-300);
  --color-brand-text:    var(--violet-600); /* 5.6:1 */

  --color-accent:        var(--sticky-lilac);
  --color-accent-subtle: #EEE8FF;
  --color-accent-text:   var(--violet-600);

  --color-border:        var(--paper-300);
  --color-border-strong: var(--ink-900);
  --color-border-subtle: var(--paper-200);

  --color-focus:         var(--violet-600);
  --color-redline:       var(--coral-400);
  --color-text-on-redline: var(--ink-900);  /* 7.9:1 */
  --color-proto:         var(--violet-600);
  --color-proto-text:    var(--violet-600);

  --color-success:       var(--success);
  --color-success-text:  var(--success);
  --color-warning:       var(--warning);
  --color-warning-text:  var(--warning);
  --color-danger:        var(--danger);
  --color-danger-text:   var(--danger);

  --shadow-hard:         2px 2px 0 var(--color-border-strong);
  --shadow-hard-lg:      4px 4px 0 var(--color-border-strong);
  --shadow-soft:         0 10px 24px -14px rgba(22, 21, 15, 0.35);

  --grid-dot:            rgba(22, 21, 15, 0.16);
  --grid-column:         rgba(100, 69, 214, 0.07);
  --grid-column-edge:    rgba(100, 69, 214, 0.28);

  color-scheme: light;
}

/* v2.2: light only. There is no dark theme by design decision. */

/* ---------- 3. COMPONENT tokens ---------- */
:root {
  --button-height-sm: 2rem;
  --button-height-md: 2.75rem;
  --button-height-lg: 3.25rem;
  --button-padding-x: var(--sp-5);
  --button-radius: var(--radius-2);
  --button-border: var(--bw-thick) solid var(--color-border-strong);

  --card-padding: var(--sp-5);
  --card-radius: var(--radius-3);
  --card-border: var(--bw-thick) solid var(--color-border-strong);

  --pin-size: 1.5rem;
  --pin-bg: var(--violet-600);
  --pin-fg: var(--paper-0);

  --nav-height: 3.75rem;
  --input-height: 2.75rem;
}