/* Olocus design tokens — generated from docs/STYLE-GUIDE.md Appendix A.
 *
 * Every component CSS file must reference these via var(--token-name).
 * Raw hex / rgb / hsl / named colours, raw px values for spacing or type,
 * and bespoke transition timings are all forbidden in component CSS by
 * the style-guide doctrine in §0 (Operating discipline). */

:root {
  /* Primary — Verdure */
  --verdure-50:  #F2F8F4;
  --verdure-100: #E0EEE6;
  --verdure-200: #C7DFD0;
  --verdure-300: #A7CFBA;
  --verdure-400: #7DB69A;
  --verdure-500: #4A8868;
  --verdure-600: #3A7053;
  --verdure-700: #2E5A42;
  --verdure-800: #244832;
  --verdure-900: #1A3528;
  --verdure-950: #0E2218;

  /* Accent — Lapis (bounded exception, use rarely) */
  --lapis-100: #E1E6F2;
  --lapis-200: #C8D2EB;
  --lapis-400: #6B89D5;
  --lapis-500: #3354A8;
  --lapis-700: #1E3A7A;
  --lapis-800: #15295A;

  /* Neutrals — Slate */
  --slate-0:   #FFFFFF;
  --slate-50:  #F2F4F2;
  --slate-100: #E8EBE9;
  --slate-150: #DEE2DF;
  --slate-200: #CFD4D1;
  --slate-300: #B0B8B4;
  --slate-400: #8C9692;
  --slate-500: #646F6B;
  --slate-600: #4C5754;
  --slate-700: #3A4441;
  --slate-800: #2A3331;
  --slate-850: #1F2826;
  --slate-900: #171F1D;
  --slate-950: #0E1614;

  /* Vellum — warm proof-surface */
  --vellum-0:   #FBF8F1;
  --vellum-50:  #F3F0E7;
  --vellum-100: #E8E3D3;

  /* Semantic (not brand) */
  --red-500:   #DC2626;
  --amber-500: #D97706;
  --blue-500:  #2563EB;

  /* Typography */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Motion */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:      cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1.0);
  --ease-compose: cubic-bezier(0.5, 0.0, 0.2, 1.0); /* composition only */

  --duration-fast:    100ms;
  --duration-default: 150ms;
  --duration-medium:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  400ms;
  --duration-compose: 800ms;  /* signature moment only */
  --duration-breath:  2200ms; /* validity-near-expiry loop */

  /* Semantic aliases — light mode (app chrome defaults) */
  --color-bg-page:          var(--slate-0);
  --color-bg-surface:       var(--slate-50);
  --color-bg-elevated:      var(--slate-100);
  --color-bg-overlay:       var(--slate-200);
  --color-border-primary:   var(--slate-200);
  --color-border-secondary: var(--slate-150);
  --color-text-heading:     var(--slate-900);
  --color-text-body:        var(--slate-600);
  --color-text-muted:       var(--slate-400);
  --color-text-on-primary:  var(--slate-0);
  --color-primary-bg:       var(--verdure-600);
  --color-primary-hover:    var(--verdure-700);
  --color-primary-active:   var(--verdure-800);
  --color-primary-accent:   var(--verdure-500); /* iris mark, focus ring */
  --color-primary-text:     var(--verdure-700);

  /* Semantic aliases — proof-surface */
  --color-bg-proof:              var(--vellum-0);
  --color-bg-proof-inset:        var(--vellum-50);
  --color-border-proof:          var(--vellum-100);
  --color-accent-bounded:        var(--lapis-500);
  --color-accent-bounded-subtle: var(--lapis-100);
  --color-text-bounded:          var(--lapis-700);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:          var(--slate-950);
    --color-bg-surface:       var(--slate-900);
    --color-bg-elevated:      var(--slate-850);
    --color-bg-overlay:       var(--slate-800);
    --color-border-primary:   var(--slate-800);
    --color-border-secondary: var(--slate-700);
    --color-text-heading:     var(--slate-100);
    --color-text-body:        var(--slate-400);
    --color-text-muted:       var(--slate-500);
    --color-text-on-primary:  var(--slate-950);
    --color-primary-bg:       var(--verdure-500);
    --color-primary-hover:    var(--verdure-600);
    --color-primary-active:   var(--verdure-700);
    --color-primary-accent:   var(--verdure-500);
    --color-primary-text:     var(--verdure-400);

    --color-bg-proof:              var(--slate-900);
    --color-bg-proof-inset:        var(--slate-850);
    --color-border-proof:          var(--slate-800);
    --color-accent-bounded:        var(--lapis-500);
    --color-accent-bounded-subtle: var(--lapis-700);
    --color-text-bounded:          var(--lapis-400);
  }
}

/* Surface grain — applied to vellum-0 backgrounds on proof-surfaces only.
 * Per STYLE-GUIDE.md §9.2, dark mode drops the grain. */
.vellum-grain {
  background-color: var(--color-bg-proof);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

@media (prefers-color-scheme: dark) {
  .vellum-grain {
    background-image: none;
  }
}

/* Forced Colors Mode — preserve meaning under user-controlled palettes */
@media (forced-colors: active) {
  .iris-mark { stroke: CanvasText; }
  .bounded-exception-border { border-inline-start-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}