/* ============================================================================
   Green IO Conference Management — Design Tokens
   ============================================================================
   Single source of truth for every allowed design value.
   Every CSS rule in templates and custom.css MUST reference these tokens via
   var(--token-name). Do NOT hardcode px/hex/rem values in stylesheets.

   Rules enforced by the ui-standards skill. See:
   - https://www.w3.org/WAI/WCAG22/Understanding/ (contrast, target size)
   - https://refactoringui.com/ (scale ratios, de-emphasis)
   - Green IO brand guidelines (orange, red, blue-grey)

   Palette was generated by anchoring the 4 brand colors at their natural OKLCH
   lightness steps, then interpolating 9-shade ramps (50..900) in OKLCH space
   with chroma tapered toward extremes.

   Contrast note (AA = 4.5:1 normal text, 3:1 large text, against white):
   - For TEXT on white background, use *-600 or darker for semantic colors.
   - *-400 and *-500 are decorative/CTA fills only; text on top must be white
     or dark neutral, whichever passes 4.5:1 against that fill.
   - neutral-400 (#959FB0) fails 4.5:1 on white → disabled/placeholder use only.
   ============================================================================ */

:root {
  /* --- Type scale (Refactoring UI 1.25 modular, min 16px body) -------------- */
  --font-size-xs:    12px;   /* micro-copy; use sparingly, not body */
  --font-size-sm:    14px;   /* captions, labels, footnotes (floor) */
  --font-size-base:  16px;   /* body text — NEVER go below this for body */
  --font-size-md:    20px;   /* emphasized body, h4 */
  --font-size-lg:    24px;   /* h3 */
  --font-size-xl:    30px;   /* h2 */
  --font-size-2xl:   36px;   /* h1 */
  --font-size-3xl:   48px;   /* display / hero headings (rare in admin) */

  --line-height-body:    1.5;
  --line-height-heading: 1.25;
  --line-height-tight:   1.1;   /* dense table cells only */

  /* --- Font families (system-only; no web fonts on internal tool) ---------- */
  --font-family-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: var(--font-family-body);
  --font-family-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* --- Line length (readability ceiling, rule #1) -------------------------- */
  --line-length-max: 75ch;

  /* --- Spacing scale (4px base, 8px rhythm, non-linear) -------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Content widths ------------------------------------------------------ */
  --content-max-width: 1200px;  /* general page container */
  --text-max-width:     720px;  /* long-form text views / narrow forms */
  --form-max-width:     720px;  /* matches .form-container */
  --form-wide-max-width: 960px; /* matches .form-container-wide */

  /* --- Panel / card padding ------------------------------------------------ */
  --panel-padding:    var(--space-6);   /* 24px — default */
  --panel-padding-sm: var(--space-4);   /* 16px — compact cards only */

  /* --- Target size (WCAG 2.5.5 — 44×44px recommended) ---------------------- */
  --target-size-min: 44px;

  /* --- Border radius scale ------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* --- Shadow / elevation scale -------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ==========================================================================
     COLOR PALETTE
     Brand anchors:
       Orange  #FF9747  → primary-400  (natural L=0.77 in OKLCH, hue ~55°)
       Red     #F17C5C  → error-400    (natural L=0.71 in OKLCH, hue ~36°)
       Blue-Grey #56688D → neutral-500 (natural L=0.52, hue ~264°)
       Blue-Grey #000C34 → neutral-900 (natural L=0.18, hue ~262°)
     ========================================================================== */

  /* Primary — brand orange, anchor at 400 */
  --color-primary-50:  #FFEFDD;
  --color-primary-100: #FFE5D3;
  --color-primary-200: #FFC69E;
  --color-primary-300: #F8A469;
  --color-primary-400: #FF9747;  /* ← Brand Orange */
  --color-primary-500: #C46100;
  --color-primary-600: #A24200;
  --color-primary-700: #7E2800;
  --color-primary-800: #581000;
  --color-primary-900: #340000;

  /* Neutral — blue-grey, anchor at 500 (#56688D) and 900 (#000C34) */
  --color-neutral-50:  #F7F8FC;
  --color-neutral-100: #F0F2F5;
  --color-neutral-200: #E0E5ED;
  --color-neutral-300: #C1C8D5;
  --color-neutral-400: #959FB0;   /* ↓ contrast fails on white: disabled/placeholder only */
  --color-neutral-500: #55688D;   /* ← Brand Blue-Grey 500 */
  --color-neutral-600: #394255;
  --color-neutral-700: #1E293D;
  --color-neutral-800: #0B152A;
  --color-neutral-900: #010C34;   /* ← Brand Blue-Grey 900 */

  /* Error — brand red, anchor at 400 */
  --color-error-50:  #FFEDE4;
  --color-error-100: #FFE3DA;
  --color-error-200: #FFC2AE;
  --color-error-300: #FE9E83;
  --color-error-400: #F17C5C;  /* ← Brand Red (decorative; text on top must be dark) */
  --color-error-500: #CA593A;
  --color-error-600: #A83919;  /* ← use for ERROR TEXT on white (passes AA) */
  --color-error-700: #821F00;
  --color-error-800: #5C0500;
  --color-error-900: #370000;

  /* Success — green, anchor at 500 (standard WCAG-validated value) */
  --color-success-50:  #E2FEE6;
  --color-success-100: #D8F4DC;
  --color-success-200: #A9E6B3;
  --color-success-300: #77D38A;
  --color-success-400: #3BBA60;
  --color-success-500: #16A34A;  /* decorative fill; use -600 for text on white */
  --color-success-600: #007B22;  /* ← use for SUCCESS TEXT on white */
  --color-success-700: #005C06;
  --color-success-800: #003E00;
  --color-success-900: #002100;

  /* Warning — amber, anchor at 500 */
  --color-warning-50:  #FFEFDC;
  --color-warning-100: #FFE5D2;
  --color-warning-200: #FFC79C;
  --color-warning-300: #F7A564;
  --color-warning-400: #E5821F;
  --color-warning-500: #D97706;  /* decorative fill; use -600 for text on white */
  --color-warning-600: #A14400;  /* ← use for WARNING TEXT on white */
  --color-warning-700: #7D2900;
  --color-warning-800: #581100;
  --color-warning-900: #340000;

  /* Info — blue */
  --color-info-50:  #E2F6FF;
  --color-info-100: #D8ECFF;
  --color-info-200: #ABD4FF;
  --color-info-300: #7EB7FF;
  --color-info-400: #5295FF;
  --color-info-500: #2563EB;  /* passes AA on white at 4.8:1 */
  --color-info-600: #1754DB;
  --color-info-700: #0136AF;
  --color-info-800: #001A82;
  --color-info-900: #000054;

  /* ==========================================================================
     SEMANTIC ALIASES
     Templates and custom.css SHOULD prefer these over raw palette values.
     ========================================================================== */

  /* Surfaces — three layers of elevation:
     --color-bg        page background (whole document)
     --color-surface   panels/cards/forms — visibly elevated above page in BOTH modes
     --color-bg-subtle zebra rows / muted blocks
     --color-bg-muted  hover states / tab backgrounds
     --color-bg-inverted navbar, fixed-dark surfaces (does NOT flip — see navbar)
     The flip happens in @media (prefers-color-scheme: dark) below. */
  --color-bg:              #FFFFFF;                   /* page bg in light mode */
  --color-surface:         #FFFFFF;                   /* panel bg — elevated by border in light mode */
  --color-bg-subtle:       var(--color-neutral-50);   /* zebra striping, alt rows */
  --color-bg-muted:        var(--color-neutral-100);  /* tab backgrounds, hover states */
  --color-bg-inverted:     var(--color-neutral-900);  /* navbar, dark surfaces */

  /* Text */
  --color-text:            var(--color-neutral-900);  /* primary body text */
  --color-text-secondary:  var(--color-neutral-600);  /* de-emphasized body */
  --color-text-tertiary:   var(--color-neutral-500);  /* captions, helper text */
  --color-text-disabled:   var(--color-neutral-400);  /* disabled form fields */
  --color-text-inverted:   var(--color-neutral-50);   /* on dark surfaces */
  --color-text-on-primary: var(--color-neutral-900);  /* text on --color-primary-400 fill */

  /* Borders */
  --color-border:          var(--color-neutral-200);  /* default separators */
  --color-border-strong:   var(--color-neutral-300);  /* emphasized borders */
  --color-border-focus:    var(--color-primary-500);  /* focus rings */

  /* Links */
  --color-link:            var(--color-primary-600);  /* passes AA on white */
  --color-link-hover:      var(--color-primary-700);

  /* Semantic (for badges, alerts, toasts — use -500 fills with dark text, or -600 for standalone text) */
  --color-success:         var(--color-success-500);
  --color-success-text:    var(--color-success-600);
  --color-warning:         var(--color-warning-500);
  --color-warning-text:    var(--color-warning-600);
  --color-error:           var(--color-error-500);
  --color-error-text:      var(--color-error-600);
  --color-info:            var(--color-info-500);
  --color-info-text:       var(--color-info-600);

  /* ==========================================================================
     BACKWARD-COMPAT ALIASES (Strategy B reconciliation)
     The legacy --gio-* names are kept so existing custom.css rules keep
     working. Migrate opportunistically to the --color-* / semantic tokens.
     DO NOT introduce new uses of --gio-* in new code.
     ========================================================================== */
  --gio-navy:        var(--color-neutral-900);   /* was #1B1B3A (different hue) */
  --gio-orange:      var(--color-primary-400);   /* was #F5922A */
  --gio-white:       var(--color-bg);
  --gio-light-gray:  var(--color-neutral-100);   /* was #F5F5F5 */
  --gio-gray:        var(--color-neutral-500);   /* was #6B7280 */
  --gio-dark-gray:   var(--color-neutral-700);   /* was #374151 */
  --gio-border:      var(--color-border);        /* was #E5E7EB */

  /* Status colors — kept as literal hex (Strategy B: deferred migration).
     Each was UX-validated for its meaning; remap to palette tokens in a
     follow-up commit when contrast and visual differentiation can be
     re-validated together. */
  --status-draft:             #9CA3AF;
  --status-ready:             #3B82F6;
  --status-reviewed:          #10B981;
  --status-posted:            #065F46;
  --status-sent:              #0EA5E9;  /* teal: in-flight manual 1:1 send */
  --status-sent-via-partner:  #D97706;  /* amber: in-flight via external partner */
  --status-confirmed-sent:    #047857;  /* deep green: terminal delivery confirmed */
  --status-overdue:           #EF4444;
  --status-skipped:           #D1D5DB;

  /* ==========================================================================
     PICO CSS OVERRIDES
     Pico exposes --pico-* variables; map them onto our tokens so Pico's
     default styles stay on-brand.
     ========================================================================== */
  --pico-primary:           var(--color-primary-400);
  --pico-primary-hover:     var(--color-primary-500);
  --pico-primary-focus:     var(--color-primary-500);
  --pico-color:             var(--color-text);
  --pico-background-color:  var(--color-bg);
  --pico-font-family:       var(--font-family-body);
  --pico-font-size:         100%;                       /* 16px base — skill rule #2 */
  --pico-line-height:       var(--line-height-body);
  --pico-border-color:      var(--color-border);
  --pico-border-radius:     var(--radius-md);
  --pico-muted-color:       var(--color-text-secondary);
  --pico-muted-border-color: var(--color-border);

  /* ==========================================================================
     BADGE TONES — semantic pair per tone, flipped in dark-mode blocks below.
     Adding a new tone = define a {-bg,-fg} pair here + one rule in custom.css.
     brand-fill / brand-dark are intentionally fixed across modes.
     ========================================================================== */
  --badge-info-bg:       var(--color-info-100);
  --badge-info-fg:       var(--color-info-700);
  --badge-success-bg:    var(--color-success-100);
  --badge-success-fg:    var(--color-success-700);
  --badge-warning-bg:    var(--color-warning-100);
  --badge-warning-fg:    var(--color-warning-700);
  --badge-error-bg:      var(--color-error-100);
  --badge-error-fg:      var(--color-error-700);
  --badge-neutral-bg:    var(--color-neutral-100);
  --badge-neutral-fg:    var(--color-neutral-700);
  --badge-sent-bg:       var(--color-info-300);
  --badge-sent-fg:       var(--color-info-900);
  --badge-brand-fill-bg: var(--color-primary-400);
  --badge-brand-fill-fg: var(--color-text-on-primary);
  --badge-brand-dark-bg: var(--color-neutral-900);
  --badge-brand-dark-fg: var(--color-neutral-50);
}

/* ============================================================================
   Dark mode — override the semantic layer only.
   (Palette stays the same; surfaces and text flip.)
   Skill rule #29 — enabled by default via prefers-color-scheme.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:              var(--color-neutral-900);
    --color-surface:         var(--color-neutral-700);  /* slightly lighter than page bg → cards visibly elevated (1.37:1) */
    --color-bg-subtle:       var(--color-neutral-800);
    --color-bg-muted:        var(--color-neutral-600);
    --color-bg-inverted:     var(--color-neutral-50);

    --color-text:            var(--color-neutral-50);
    --color-text-secondary:  var(--color-neutral-300);
    --color-text-tertiary:   var(--color-neutral-400);
    --color-text-inverted:   var(--color-neutral-900);

    --color-border:          var(--color-neutral-600);
    --color-border-strong:   var(--color-neutral-500);

    --color-link:            var(--color-primary-300);
    --color-link-hover:      var(--color-primary-200);

    /* Pico v2 has its own prefers-color-scheme: dark block that rebinds --pico-*
       to its own hsl values. Without these explicit re-mappings, Pico wins via
       cascade order, breaking our token chain (text becomes Pico-grey instead
       of var(--color-text), inputs lose contrast, etc.). */
    --pico-color:                          var(--color-text);
    --pico-h1-color:                       var(--color-text);
    --pico-h2-color:                       var(--color-text);
    --pico-h3-color:                       var(--color-text);
    --pico-h4-color:                       var(--color-text);
    --pico-h5-color:                       var(--color-text);
    --pico-h6-color:                       var(--color-text);
    --pico-background-color:               var(--color-bg);
    --pico-border-color:                   var(--color-border);
    --pico-muted-color:                    var(--color-text-secondary);
    --pico-muted-border-color:             var(--color-border);
    --pico-form-element-background-color:  var(--color-bg-subtle);
    --pico-form-element-border-color:      var(--color-border);
    --pico-form-element-color:             var(--color-text);
    --pico-form-element-placeholder-color: var(--color-text-tertiary);
    --pico-form-element-focus-color:       var(--color-primary-300);
    --pico-card-background-color:          var(--color-surface);
    --pico-card-border-color:              var(--color-border);
    --pico-table-row-stripped-background-color: var(--color-bg-subtle);
    --pico-primary:                        var(--color-primary-300);
    --pico-primary-hover:                  var(--color-primary-200);
    --pico-primary-focus:                  var(--color-primary-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.60);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.70);

    /* Badge tone flips — brand-fill/brand-dark intentionally unchanged. */
    --badge-info-bg:    var(--color-info-800);
    --badge-info-fg:    var(--color-info-200);
    --badge-success-bg: var(--color-success-800);
    --badge-success-fg: var(--color-success-200);
    --badge-warning-bg: var(--color-warning-800);
    --badge-warning-fg: var(--color-warning-200);
    --badge-error-bg:   var(--color-error-800);
    --badge-error-fg:   var(--color-error-200);
    --badge-neutral-bg: var(--color-neutral-700);
    --badge-neutral-fg: var(--color-neutral-200);
    --badge-sent-bg:    var(--color-info-700);
    --badge-sent-fg:    var(--color-info-100);
  }
}

/* Manual override: a navbar toggle (or DevTools attribute edit) can force dark mode
   without depending on the OS preference. Mirrors the @media block above. */
:root[data-theme="dark"] {
  --color-bg:              var(--color-neutral-900);
  --color-surface:         var(--color-neutral-700);
  --color-bg-subtle:       var(--color-neutral-800);
  --color-bg-muted:        var(--color-neutral-600);
  --color-bg-inverted:     var(--color-neutral-50);
  --color-text:            var(--color-neutral-50);
  --color-text-secondary:  var(--color-neutral-300);
  --color-text-tertiary:   var(--color-neutral-400);
  --color-text-inverted:   var(--color-neutral-900);
  --color-border:          var(--color-neutral-600);
  --color-border-strong:   var(--color-neutral-500);
  --color-link:            var(--color-primary-300);
  --color-link-hover:      var(--color-primary-200);
  --pico-color:                          var(--color-text);
  --pico-h1-color:                       var(--color-text);
  --pico-h2-color:                       var(--color-text);
  --pico-h3-color:                       var(--color-text);
  --pico-h4-color:                       var(--color-text);
  --pico-h5-color:                       var(--color-text);
  --pico-h6-color:                       var(--color-text);
  --pico-background-color:               var(--color-bg);
  --pico-border-color:                   var(--color-border);
  --pico-muted-color:                    var(--color-text-secondary);
  --pico-muted-border-color:             var(--color-border);
  --pico-form-element-background-color:  var(--color-bg-subtle);
  --pico-form-element-border-color:      var(--color-border);
  --pico-form-element-color:             var(--color-text);
  --pico-form-element-placeholder-color: var(--color-text-tertiary);
  --pico-form-element-focus-color:       var(--color-primary-300);
  --pico-card-background-color:          var(--color-surface);
  --pico-card-border-color:              var(--color-border);
  --pico-table-row-stripped-background-color: var(--color-bg-subtle);
  --pico-primary:                        var(--color-primary-300);
  --pico-primary-hover:                  var(--color-primary-200);
  --pico-primary-focus:                  var(--color-primary-300);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.60);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.70);

  /* Badge tone flips — mirrors the @media block above. */
  --badge-info-bg:    var(--color-info-800);
  --badge-info-fg:    var(--color-info-200);
  --badge-success-bg: var(--color-success-800);
  --badge-success-fg: var(--color-success-200);
  --badge-warning-bg: var(--color-warning-800);
  --badge-warning-fg: var(--color-warning-200);
  --badge-error-bg:   var(--color-error-800);
  --badge-error-fg:   var(--color-error-200);
  --badge-neutral-bg: var(--color-neutral-700);
  --badge-neutral-fg: var(--color-neutral-200);
  --badge-sent-bg:    var(--color-info-700);
  --badge-sent-fg:    var(--color-info-100);
}

/* ============================================================================
   Icon-size utilities
   ============================================================================
   Lucide icons are <i data-lucide="..."> elements that lucide.js swaps for
   inline <svg>. They render at the SVG's intrinsic size unless we constrain
   them. The style guide allows inline `style="width:Npx;height:Npx;"` as
   the one inline-style exception, but that pattern was copy-pasted across
   ~470 places. These utility classes replace it, keeping the inline
   exception reserved for the ~9 spots that genuinely combine sizing with
   other declarations (vertical-align, flex-shrink, brand colors).
   Use `class="icon-N"` on the <i data-lucide="..."> tag. */
.icon-12 { width: 12px; height: 12px; }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-48 { width: 48px; height: 48px; }


/* ============================================================================
   Reduced motion — skill rule #72
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}