/* ============================================================================
 * md-brand design tokens — "Architectural Editorial"
 * Canonical source: skills/md-brand/DESIGN.md (v1.1, amber/graphite) +
 *   tokens/terminal/md-architectural-editorial.* (the extended UI/terminal
 *   palette, origin: OneDrive Personal Brand/terminal-theme).
 * The older chartreuse/forest-green palette is deprecated (archived in git).
 *
 * ONE vocabulary, TWO themes, TWO modes.
 *   Theme  : Editorial (brand-carrying surfaces) | Native (host-adaptive chrome)
 *   Mode   : light is the fallback default; dark via prefers-color-scheme;
 *            an explicit [data-theme] toggle overrides the OS in both directions.
 *   Canonical *hero* mode is dark (DESIGN.md) — a deliberate per-surface choice.
 *
 * The brand palette is minimal (editorial restraint). The extended palette adds
 * what UI needs: two extra hues (rose, teal), a mid-grey, semantic scales, a
 * data-viz series, and a full ANSI-16 terminal set — all harmonised to graphite.
 * Semantic role mapping is the brand's own: error=terracotta, warn=amber,
 * success=moss, info=slate.
 * ==========================================================================*/

/* ---- Fonts (vendored woff2 alongside this file's skill) ------------------ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("./fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("./fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("./fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("./fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300;
  font-display: swap; src: url("./fonts/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("./fonts/JetBrainsMono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("./fonts/JetBrainsMono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("./fonts/JetBrainsMono-700.woff2") format("woff2"); }

/* ======================= MODE-INVARIANT TOKENS ============================ */
:root {
  /* Raw brand hues (mode-invariant). Prefer semantic tokens below. */
  --md-c-amber-light: #D8CC72;   /* light-mode highlight / marker            */
  --md-c-amber-dark:  #C4A84F;   /* dark-mode highlight — the spark          */
  --md-c-terracotta:  #C96F4A;   /* warm signal / decision / ERROR           */
  --md-c-terra-light: #E08A63;   /* brighter terracotta (dark-legible error) */
  --md-c-moss:        #8A9B7A;   /* secondary / SUCCESS                       */
  --md-c-moss-light:  #A6B796;
  --md-c-slate:       #7C99A8;   /* technical / INFO                         */
  --md-c-slate-light: #9AB6C4;
  --md-c-rose:        #AF7497;   /* extended hue — mauve/rose (UI + data-viz) */
  --md-c-rose-light:  #CC8EB4;
  --md-c-teal:        #6E9E96;   /* extended hue — teal (UI + data-viz)      */
  --md-c-teal-light:  #8CBAB2;
  --md-c-graphite:    #1B1C1E;   /* canonical dark surface                  */
  --md-c-charcoal:    #242628;   /* canonical dark raised surface           */
  --md-c-mid-grey:    #767A80;   /* extended neutral step (ANSI brightblack) */
  --md-c-stone:       #E8E1D4;   /* light raised surface                    */
  --md-c-paper:       #F5F2EC;   /* light surface — never #fff              */
  --md-c-near-black:  #1A1A1A;   /* light ink — never pure #000             */
  --md-c-near-white:  #F0EDE6;   /* dark ink                                */

  /* Data-viz categorical series — distinguishable, brand-harmonised.
     DESIGN.md rule: lead neutral; use amber sparingly as the emphasis series. */
  --md-viz-1: var(--md-c-slate);
  --md-viz-2: var(--md-c-moss);
  --md-viz-3: var(--md-c-terracotta);
  --md-viz-4: var(--md-c-teal);
  --md-viz-5: var(--md-c-rose);
  --md-viz-6: var(--md-c-amber-dark);   /* the emphasis series / highlight */

  /* ANSI-16 terminal palette (always the dark canonical theme).
     Source of truth: tokens/terminal/md-architectural-editorial.{ghostty,kitty.conf}. */
  --md-term-bg:     #1B1C1E;  --md-term-fg:     #F0EDE6;
  --md-term-cursor: #C4A84F;  --md-term-sel:    #34373B;
  --md-term-0:  #242628; --md-term-1:  #C96F4A; --md-term-2:  #8A9B7A; --md-term-3:  #C4A84F;
  --md-term-4:  #7C99A8; --md-term-5:  #AF7497; --md-term-6:  #6E9E96; --md-term-7:  #E8E1D4;
  --md-term-8:  #767A80; --md-term-9:  #E08A63; --md-term-10: #A6B796; --md-term-11: #D8CC72;
  --md-term-12: #9AB6C4; --md-term-13: #CC8EB4; --md-term-14: #8CBAB2; --md-term-15: #F5F2EC;

  /* Typography */
  --md-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

  --md-weight-light:    300;
  --md-weight-body:     400;
  --md-weight-medium:   500;
  --md-weight-semibold: 600;
  --md-weight-bold:     700;

  --md-text-hero:    clamp(2.2rem, 5vw, 3.5rem);
  --md-text-title:   1.75rem;
  --md-text-h2:      1.35rem;
  --md-text-body:    0.96rem;
  --md-text-caption: 0.75rem;
  --md-text-section: 0.6875rem;
  --md-text-label:   0.66rem;
  --md-tracking-section: 0.14em;
  --md-tracking-tight:  -0.01em;
  --md-tracking-hero:   -0.02em;
  --md-leading-tight: 1.15;
  --md-leading-body:  1.55;
  --md-leading-loose: 1.7;

  /* Spacing — 8px unit */
  --md-s-0: 0;    --md-s-1: 4px;  --md-s-2: 8px;  --md-s-3: 12px; --md-s-4: 16px;
  --md-s-5: 24px; --md-s-6: 32px; --md-s-7: 48px; --md-s-8: 64px; --md-s-9: 96px;
  --md-gap-panel:   16px;
  --md-gap-section: 32px;
  --md-page-margin: 48px;

  /* Radius — never pill */
  --md-radius-sm:    2px;
  --md-radius:       3px;
  --md-radius-md:    4px;
  --md-radius-lg:    6px;
  --md-radius-panel: 12px;

  /* Motion — restrained */
  --md-ease:      cubic-bezier(.2, 0, .2, 1);
  --md-dur-fast:  120ms;
  --md-dur:       180ms;
  --md-press:     translateY(1px);
  /* focus ring convention: 2px solid var(--md-focus); outline-offset: -1px; */
}

/* ============================ EDITORIAL ================================== */

/* Editorial — LIGHT (fallback default) */
:root {
  --md-bg:          var(--md-c-paper);
  --md-surface:     var(--md-c-stone);
  --md-surface-2:   #E4DCCB;
  --md-fg:          var(--md-c-near-black);
  --md-fg-muted:    #55524B;
  --md-fg-quiet:    #86827A;
  --md-line:        rgba(26, 26, 26, 0.13);
  --md-line-strong: rgba(26, 26, 26, 0.24);
  --md-accent:      #9D7F2E;                 /* darkened amber — AA on paper */
  --md-accent-fg:   #FFFFFF;
  --md-highlight:   var(--md-c-amber-light);
  --md-danger:      #B1542E;                 /* terracotta, darkened (error) */
  --md-warn:        #9D7F2E;                 /* amber, darkened (warn)       */
  --md-success:     #5F7350;                 /* moss, darkened               */
  --md-info:        #4F7183;                 /* slate, darkened              */
  --md-focus:       #9D7F2E;
}

/* Editorial — DARK (canonical hero) */
@media (prefers-color-scheme: dark) {
  :root {
    --md-bg:          var(--md-c-graphite);
    --md-surface:     var(--md-c-charcoal);
    --md-surface-2:   #2C2E30;
    --md-fg:          var(--md-c-near-white);
    --md-fg-muted:    #A5A199;
    --md-fg-quiet:    var(--md-c-mid-grey);
    --md-line:        rgba(240, 237, 230, 0.11);
    --md-line-strong: rgba(240, 237, 230, 0.20);
    --md-accent:      var(--md-c-amber-dark);
    --md-accent-fg:   var(--md-c-graphite);
    --md-highlight:   var(--md-c-amber-dark);
    --md-danger:      var(--md-c-terracotta);   /* error */
    --md-warn:        var(--md-c-amber-dark);    /* warn  */
    --md-success:     var(--md-c-moss);
    --md-info:        var(--md-c-slate);
    --md-focus:       var(--md-c-amber-dark);
  }
}

/* Editorial — explicit toggle (scopable to any element) */
[data-theme="light"] {
  --md-bg: var(--md-c-paper); --md-surface: var(--md-c-stone); --md-surface-2: #E4DCCB;
  --md-fg: var(--md-c-near-black); --md-fg-muted: #55524B; --md-fg-quiet: #86827A;
  --md-line: rgba(26,26,26,0.13); --md-line-strong: rgba(26,26,26,0.24);
  --md-accent: #9D7F2E; --md-accent-fg: #FFFFFF; --md-highlight: var(--md-c-amber-light);
  --md-danger: #B1542E; --md-warn: #9D7F2E; --md-success: #5F7350; --md-info: #4F7183; --md-focus: #9D7F2E;
}
[data-theme="dark"] {
  --md-bg: var(--md-c-graphite); --md-surface: var(--md-c-charcoal); --md-surface-2: #2C2E30;
  --md-fg: var(--md-c-near-white); --md-fg-muted: #A5A199; --md-fg-quiet: var(--md-c-mid-grey);
  --md-line: rgba(240,237,230,0.11); --md-line-strong: rgba(240,237,230,0.20);
  --md-accent: var(--md-c-amber-dark); --md-accent-fg: var(--md-c-graphite); --md-highlight: var(--md-c-amber-dark);
  --md-danger: var(--md-c-terracotta); --md-warn: var(--md-c-amber-dark); --md-success: var(--md-c-moss); --md-info: var(--md-c-slate); --md-focus: var(--md-c-amber-dark);
}
:root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"], [data-theme="light"] { color-scheme: light; }

/* ============================== NATIVE ================================== *
 * Host-adaptive chrome. Neutral surfaces that blend into a host; keeps the
 * amber accent as the one brand thread. Set data-brand="native" on the root. */

/* Native — LIGHT (default) */
[data-brand="native"] {
  --md-bg:          #FFFFFF;
  --md-surface:     #F6F7F8;
  --md-surface-2:   #ECEEF0;
  --md-fg:          #1A1A1A;
  --md-fg-muted:    #55555A;
  --md-fg-quiet:    #8A8A90;
  --md-line:        rgba(20, 20, 25, 0.12);
  --md-line-strong: rgba(20, 20, 25, 0.22);
  --md-accent:      #9D7F2E;
  --md-accent-fg:   #FFFFFF;
  --md-highlight:   var(--md-c-amber-light);
  --md-danger:      #B1542E;
  --md-warn:        #9D7F2E;
  --md-success:     #5F7350;
  --md-info:        #4F7183;
  --md-focus:       #9D7F2E;
}

/* Native — DARK (OS preference) */
@media (prefers-color-scheme: dark) {
  :root[data-brand="native"] {
    --md-bg:          #1C1D1F;
    --md-surface:     #242628;
    --md-surface-2:   #2C2E30;
    --md-fg:          var(--md-c-near-white);
    --md-fg-muted:    #A2A2A8;
    --md-fg-quiet:    var(--md-c-mid-grey);
    --md-line:        rgba(240, 240, 245, 0.11);
    --md-line-strong: rgba(240, 240, 245, 0.20);
    --md-accent:      var(--md-c-amber-dark);
    --md-accent-fg:   #1C1D1F;
    --md-highlight:   var(--md-c-amber-dark);
    --md-danger:      var(--md-c-terracotta);
    --md-warn:        var(--md-c-amber-dark);
    --md-success:     var(--md-c-moss);
    --md-info:        var(--md-c-slate);
    --md-focus:       var(--md-c-amber-dark);
  }
}

/* Native — explicit toggle ((0,2,0) beats Editorial's [data-theme] (0,1,0)) */
[data-brand="native"][data-theme="light"] {
  --md-bg: #FFFFFF; --md-surface: #F6F7F8; --md-surface-2: #ECEEF0;
  --md-fg: #1A1A1A; --md-fg-muted: #55555A; --md-fg-quiet: #8A8A90;
  --md-line: rgba(20,20,25,0.12); --md-line-strong: rgba(20,20,25,0.22);
  --md-accent: #9D7F2E; --md-accent-fg: #FFFFFF; --md-highlight: var(--md-c-amber-light);
  --md-danger: #B1542E; --md-warn: #9D7F2E; --md-success: #5F7350; --md-info: #4F7183; --md-focus: #9D7F2E;
}
[data-brand="native"][data-theme="dark"] {
  --md-bg: #1C1D1F; --md-surface: #242628; --md-surface-2: #2C2E30;
  --md-fg: var(--md-c-near-white); --md-fg-muted: #A2A2A8; --md-fg-quiet: var(--md-c-mid-grey);
  --md-line: rgba(240,240,245,0.11); --md-line-strong: rgba(240,240,245,0.20);
  --md-accent: var(--md-c-amber-dark); --md-accent-fg: #1C1D1F; --md-highlight: var(--md-c-amber-dark);
  --md-danger: var(--md-c-terracotta); --md-warn: var(--md-c-amber-dark); --md-success: var(--md-c-moss); --md-info: var(--md-c-slate); --md-focus: var(--md-c-amber-dark);
}

/* ---- One opt-in brand utility: the amber highlight marker (DESIGN.md) ---- */
.md-highlight {
  background-image: linear-gradient(to top, var(--md-highlight) 52%, transparent 52%);
  padding: 0 0.05em;
}