/* ═══════════════════════════════════════════════════════════════════════════
   skill.re · /cdn/css/product.css
   Canonical Product Design Tokens, Dark Mode Polarity & WCAG 2.2 AA Baseline
   (DS-01, DS-02, A11Y-01, A11Y-03, A11Y-04, A11Y-08, A11Y-09, UX-02)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces (UX-02: crisp neutral off-white L 98–100%) ─────────────── */
  --bg:            #FAFAF9;
  --bg-card:       #FFFFFF;
  --bg-elevated:   #F5F5F4;
  --bg-2:          #F4F3EF;
  --bg-3:          #ECEAE3;

  /* Legacy & TWC surface aliases */
  --card:          var(--bg-card);
  --soft:          #F2F3F5;
  --soft2:         #E8E2D1;
  --soft-2:        #E8E2D2;
  --twc-bg:            var(--bg);
  --twc-surface:       var(--bg-card);
  --twc-surface-hover: var(--bg-elevated);
  --twc-divider:       var(--bg-2);

  /* ── Text (A11Y-01: WCAG 2.2 AA >= 4.5:1 on all light surfaces) ──────── */
  --ink:           #0F172A; /* 17.4:1 on #FAFAF9 */
  --ink-2:         #334155; /* 10.3:1 on #FAFAF9 */
  --ink-3:         #475569; /*  7.2:1 on #FAFAF9 */
  --muted:         #52525B; /*  7.0:1 on #FAFAF9 */
  --muted-2:       #64748B; /*  4.7:1 on #FAFAF9, 4.8:1 on #FFFFFF */

  /* Legacy & TWC text aliases (replaces low-contrast #9F9B91 / #9B9B9B) */
  --ink-soft:      var(--ink-2);
  --m:             #524E46; /* 7.18:1 on #FAF7F0, 7.54:1 on #FAFAF9 */
  --m2:            #635F56; /* 5.39:1 on #FAF7F0, 5.77:1 on #FFFFFF, 4.84:1 on #F0EBDE */
  --twc-text:           var(--ink);
  --twc-text-secondary: var(--ink-2);
  --twc-text-muted:     var(--m);
  --twc-text-faint:     var(--m2);
  --twc-text-inverse:   #FFFFFF;

  /* ── Brand & Semantic Accents (DS-01, DS-02, A11Y-01) ────────────────── */
  --brand:         #C2410C; /* Burnt Orange — 5.18:1 contrast with #FFFFFF */
  --brand-bright:  #EA580C;
  --brand-fg:      #FFFFFF;
  --brand-soft:    #FFF7ED;
  --brand-line:    #FED7AA;
  --accent:        #C2410C;
  --accent-bg:     #FFF7ED;

  --ok:            #15803D; /* 5.02:1 on #FFFFFF */
  --warn:          #B45309; /* 5.02:1 on #FFFFFF */
  --err:           #B91C1C; /* 6.47:1 on #FFFFFF */

  /* Signature Vibe & Semantic role palette (WCAG AA compliant text/fills) */
  --vibe:          #C9F75A;
  --vibe-deep:     #4D6300; /* 6.62:1 on #FFFFFF, 6.19:1 on #FAF7F0 */
  --vibe-hover:    #A8DD2F;
  --vibe-glow:     #A8DD2F;
  --vibe-soft:     #E8F8B8;
  --vibe-text:     #0B0B0B;

  --green:         #006B4B; /* 6.58:1 on #FFFFFF */
  --green-deep:    #006B4B;
  --green-bg:      rgba(0, 107, 75, 0.10);
  --mint:          #006B4B;
  --mint-soft:     #CFF2E5;
  --mint-ink:      #005A3E;

  --yellow:        #8A6300; /* 5.26:1 on #FFFFFF */
  --yellow-bg:     rgba(255, 213, 107, 0.35);
  --sun:           #FFD56B;
  --sun-soft:      #FFEDC7;
  --sun-ink:       #7A5900;

  --red:           #B82828; /* 5.95:1 on #FFFFFF */
  --red-bg:        rgba(184, 40, 40, 0.12);
  --pop:           #B82828;
  --pop-deep:      #B82828;
  --pop-soft:      #FFE0E0;
  --pop-ink:       #991B1B;

  --plum:          #5A3FB8; /* 6.74:1 on #FAF7F0, 6.05:1 on #F0EBDE */
  --plum-deep:     #5A3FB8;
  --plum-soft:     #E5DCFB;
  --plum-ink:      #4C329E;

  --sky:           #1F5FB8; /* 6.10:1 on #FFFFFF */
  --sky-soft:      #DCEAFB;
  --sky-ink:       #1E4E8C;

  /* TWC semantic aliases */
  --twc-accent:          var(--ink);
  --twc-accent-hover:    #000000;
  --twc-accent-light:    var(--bg-2);
  --twc-vibe:            var(--vibe);
  --twc-vibe-deep:       var(--vibe-deep);
  --twc-vibe-soft:       var(--vibe-soft);
  --twc-success:         var(--ok);
  --twc-success-light:   var(--mint-soft);
  --twc-warning:         var(--warn);
  --twc-warning-light:   var(--sun-soft);
  --twc-error:           var(--err);
  --twc-error-light:     var(--pop-soft);
  --twc-info:            var(--sky);
  --twc-info-light:      var(--sky-soft);
  --twc-highlight:       var(--plum);
  --twc-highlight-light: var(--plum-soft);

  /* ── Borders & Geometry (A11Y-03: 3:1 non-text input border contrast) ── */
  --line:          #E2E8F0;
  --line-2:        #CBD5E1;
  --line2:         #CBD5E1;
  --border-input:  #8C867A; /* 3.57:1 on #FFFFFF, 3.34:1 on #FAF7F0 */
  --twc-border:    var(--line);

  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     14px;
  --r-sm:          14px;
  --r:             24px;
  --r-pill:        999px;
  --twc-radius-sm:   8px;
  --twc-radius:      12px;
  --twc-radius-lg:   20px;
  --twc-radius-full: 9999px;

  /* ── Spacing, Layout & Elevation ─────────────────────────────────────── */
  --twc-space-1:   0.25rem;
  --twc-space-2:   0.5rem;
  --twc-space-3:   0.75rem;
  --twc-space-4:   1rem;
  --twc-space-6:   1.5rem;
  --twc-space-8:   2rem;
  --twc-space-12:  3rem;
  --twc-space-16:  4rem;
  --twc-space-24:  6rem;

  --twc-content-width: 1200px;
  --twc-narrow-width:  720px;
  --twc-header-height: 64px;

  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --t-fast:        0.16s;
  --t-base:        0.24s;
  --t-slow:        0.4s;
  --twc-transition:      150ms cubic-bezier(.22, 1, .36, 1);
  --twc-transition-slow: 300ms cubic-bezier(.22, 1, .36, 1);

  --shadow:        0 10px 30px -8px rgba(15, 23, 42, 0.08);
  --shadow-lg:     0 32px 64px -16px rgba(15, 23, 42, 0.16);
  --twc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --twc-shadow:    0 4px 14px -4px rgba(15, 23, 42, 0.08);
  --twc-shadow-lg: 0 18px 40px -14px rgba(15, 23, 42, 0.16);
}

/* ── Dark Mode Polarity (TYP-09 / DS-01) ───────────────────────────────── */
[data-theme="dark"] {
  --bg:            #0B0F19;
  --bg-card:       #111827;
  --bg-elevated:   #1E293B;
  --bg-2:          #1E293B;
  --bg-3:          #334155;
  --card:          #111827;
  --soft:          #1E293B;
  --soft2:         #334155;
  --soft-2:        #334155;

  --ink:           #F8FAFC;
  --ink-2:         #E2E8F0;
  --ink-3:         #CBD5E1;
  --ink-soft:      #E2E8F0;
  --muted:         #94A3B8;
  --muted-2:       #94A3B8;
  --m:             #94A3B8;
  --m2:            #94A3B8;

  --brand:         #FB923C;
  --brand-bright:  #F97316;
  --brand-fg:      #0B0F19;
  --brand-soft:    rgba(251, 146, 60, 0.14);
  --brand-line:    rgba(251, 146, 60, 0.35);
  --accent:        #FB923C;
  --accent-bg:     rgba(251, 146, 60, 0.14);

  --vibe-deep:     #C9F75A;
  --ok:            #4ADE80;
  --warn:          #FBBF24;
  --err:           #F87171;
  --green:         #34D399;
  --red:           #F87171;
  --pop:           #F87171;
  --plum:          #A78BFA;
  --sky:           #60A5FA;

  --line:          #1E293B;
  --line-2:        #334155;
  --line2:         #334155;
  --border-input:  #64748B;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg:            #0B0F19;
    --bg-card:       #111827;
    --bg-elevated:   #1E293B;
    --bg-2:          #1E293B;
    --bg-3:          #334155;
    --card:          #111827;
    --soft:          #1E293B;
    --soft2:         #334155;
    --soft-2:        #334155;

    --ink:           #F8FAFC;
    --ink-2:         #E2E8F0;
    --ink-3:         #CBD5E1;
    --ink-soft:      #E2E8F0;
    --muted:         #94A3B8;
    --muted-2:       #94A3B8;
    --m:             #94A3B8;
    --m2:            #94A3B8;

    --brand:         #FB923C;
    --brand-bright:  #F97316;
    --brand-fg:      #0B0F19;
    --brand-soft:    rgba(251, 146, 60, 0.14);
    --brand-line:    rgba(251, 146, 60, 0.35);
    --accent:        #FB923C;
    --accent-bg:     rgba(251, 146, 60, 0.14);

    --vibe-deep:     #C9F75A;
    --ok:            #4ADE80;
    --warn:          #FBBF24;
    --err:           #F87171;
    --green:         #34D399;
    --red:           #F87171;
    --pop:           #F87171;
    --plum:          #A78BFA;
    --sky:           #60A5FA;

    --line:          #1E293B;
    --line-2:        #334155;
    --line2:         #334155;
    --border-input:  #64748B;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ── Global Keyboard Focus Ring (A11Y-03 / A11Y-04) ────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand, #C2410C) !important;
  outline-offset: 2px !important;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── Non-Text Contrast on Form Controls (A11Y-03: >= 3:1 border) ───────── */
input:not([type="hidden"]):not([type="range"]),
select,
textarea,
.twc-input,
.twc-select,
.twc-textarea {
  border-color: var(--border-input, #8C867A);
}

/* ── Skip-to-Main Link (A11Y-07) ───────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -3.5rem;
  left: 1rem;
  z-index: 99999;
  background: var(--ink, #0F172A);
  color: #FFFFFF;
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  font-size: var(--text-sm, 0.875rem);
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
  text-decoration: none;
  transition: top 0.18s ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
}

/* ── Interactive Touch Targets >= 44x44px (A11Y-08) ────────────────────── */
.btn,
.twc-btn,
.pager-btn,
.ext-pop-x,
.ed-close,
.vid-row .btn-c,
.vid-toggle,
.cp-res-del button,
.m-back,
.m-tabbar .mtab {
  min-height: 44px;
  min-width: 44px;
}

/* ── Reduced Motion Preference (A11Y-04 / A11Y-09) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}