/**
 * Alius Admin V2 Design System
 * Token Architecture: Primitives → Semantic → Component
 *
 * This file defines all design tokens for the brass-and-bone registrar aesthetic.
 * Every color, size, and spacing value must reference these tokens.
 */

/* ============================================
   LAYER 1: PRIMITIVES
   Raw values. Named by what they are.
   ============================================ */

:root {
  /* Neutrals — warm-shifted for gallery/registrar aesthetic */
  --ink-900:  #14161a;   /* page background */
  --ink-800:  #1b1e24;   /* panel / card */
  --ink-700:  #20242c;   /* raised: table head, inputs-on-panel */
  --ink-600:  #2b303a;   /* hairline / border */
  --ink-550:  #22262e;   /* softer inner rule (table rows) */

  --bone-100: #eae6dd;   /* primary text — off-white */
  --bone-300: #9a9eaa;   /* secondary text */
  --bone-500: #5d6270;   /* tertiary / labels / disabled */

  /* Accent — brass. Identity, interaction, focus. */
  --brass-500: #c49a4e;
  --brass-400: #d6ab5c;  /* hover */
  --brass-900: #4a3e26;  /* deep fill */

  /* Status ramp — each hue has exactly one meaning */
  --moss-500:    #7a9b74;   /* positive / available / paid */
  --oxblood-500: #b1493f;   /* closed / sold / void */
  --slate-500:   #7c8a9c;   /* neutral / archived / draft */
  --amber-500:   #c98a3c;   /* attention / overdue / pending */

  /* Tints — low-alpha companions for pill backgrounds and highlights */
  --brass-tint:   color-mix(in srgb, var(--brass-500) 12%, transparent);
  --moss-tint:    color-mix(in srgb, var(--moss-500) 14%, transparent);
  --oxblood-tint: color-mix(in srgb, var(--oxblood-500) 14%, transparent);
  --slate-tint:   color-mix(in srgb, var(--slate-500) 12%, transparent);
  --amber-tint:   color-mix(in srgb, var(--amber-500) 14%, transparent);
}

/* ============================================
   LAYER 2: SEMANTIC ROLES
   Named by what they do, not what they are.
   ============================================ */

:root {
  /* Surfaces */
  --surface-page:    var(--ink-900);
  --surface-panel:   var(--ink-800);
  --surface-raised:  var(--ink-700);

  /* Borders */
  --border-default:  var(--ink-600);
  --border-subtle:   var(--ink-550);
  --border-strong:   var(--bone-500);

  /* Text */
  --text-primary:    var(--bone-100);
  --text-secondary:  var(--bone-300);
  --text-tertiary:   var(--bone-500);

  /* Interaction */
  --color-accent:        var(--brass-500);
  --color-accent-hover:  var(--brass-400);
  --color-accent-tint:   var(--brass-tint);
  --color-focus:         var(--brass-500);

  /* Status — map business states to these roles */
  --status-available: var(--moss-500);
  --status-sold:      var(--oxblood-500);
  --status-reserved:  var(--brass-500);
  --status-consigned: var(--brass-500);
  --status-archived:  var(--slate-500);
  --status-overdue:   var(--amber-500);

  /* Destructive actions */
  --color-destructive: var(--oxblood-500);
  --color-destructive-tint: var(--oxblood-tint);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

:root {
  /* Font families */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* CJK support appended to body stack */
  --font-body-cjk: "IBM Plex Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP",
                   "Hiragino Sans", "Microsoft YaHei", system-ui, sans-serif;

  /* Type scale */
  --text-2xs:  0.625rem;  /* 10px — dense table meta, tags */
  --text-xs:   0.6875rem; /* 11px — eyebrows, field labels, captions */
  --text-sm:   0.8125rem; /* 13px — table cells, buttons, secondary UI */
  --text-base: 0.875rem;  /* 14px — body copy, field values */
  --text-md:   1rem;      /* 16px — form inputs (min for iOS) */
  --text-lg:   1.1875rem; /* 19px — modal titles, subsection heads */
  --text-xl:   1.625rem;  /* 26px — list page titles */
  --text-2xl:  2.125rem;  /* 34px — record titles */
  --text-3xl:  2.5rem;    /* 40px — hero figure */

  /* Leading (line heights) */
  --leading-tight:  1.15;  /* display type */
  --leading-snug:   1.35;  /* table cells, labels */
  --leading-normal: 1.5;   /* body prose */
  --leading-loose:  1.65;  /* long-form */

  /* Tracking (letter spacing) */
  --tracking-label: 0.1em;   /* uppercase eyebrows */
  --tracking-mono:  0.02em;
  --tracking-tight: 0.01em;  /* large display */
}

/* ============================================
   SPACE & DIMENSION
   8px base grid, 4px half-step
   ============================================ */

:root {
  --space-3xs: 0.125rem;  /*  2px */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 2.75rem;   /* 44px */
  --space-3xl: 4rem;      /* 64px */

  /* Layout */
  --measure-max:    1180px;
  --measure-prose:  68ch;
  --gutter:         clamp(var(--space-md), 4vw, var(--space-xl));

  /* Geometry — near-flat for archival aesthetic */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 999px;
  --hairline: 1px;

  /* Controls */
  --control-height: 2.25rem;   /* 36px — buttons, inputs */
  --control-pad-x:  var(--space-md);
  --thumb-sm:  44px;   /* table row thumbnail */
  --thumb-md:  60px;   /* worklist card thumbnail */
  --touch-min: 44px;   /* minimum tap target */

  /* Modal widths */
  --modal-w-sm: 640px;
  --modal-w-md: 920px;
  --modal-w-lg: 960px;
}

/* ============================================
   MOTION
   Functional only, no decoration
   ============================================ */

:root {
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;   /* hover, focus, pill state */
  --dur-base: 180ms;   /* dropdowns, details expand */
  --dur-slow: 240ms;   /* modal open */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   BREAKPOINTS (Reference only — can't use in @media)
   Write literals in @media queries, use these as docs
   ============================================ */

:root {
  --bp-sm: 520px;   /* stack modals, scroll tab strips */
  --bp-md: 720px;   /* single-column detail, full-bleed modals */
  --bp-lg: 900px;   /* nav collapses to scroll strip */
  --bp-xl: 1200px;  /* full table column set */
}

/* ============================================
   PICO.CSS REMAPPING
   Override Pico's custom properties to use design tokens
   ============================================ */

:root {
  /* Primary color — brass */
  --pico-primary: var(--color-accent);
  --pico-primary-background: var(--color-accent);
  --pico-primary-hover: var(--color-accent-hover);
  --pico-primary-hover-background: var(--color-accent-hover);
  --pico-primary-inverse: var(--ink-900);
  --pico-primary-focus: var(--color-accent-tint);

  /* Secondary — subtle, not lime */
  --pico-secondary: var(--bone-300);
  --pico-secondary-background: var(--surface-raised);
  --pico-secondary-hover: var(--bone-100);
  --pico-secondary-hover-background: var(--ink-600);
  --pico-secondary-inverse: var(--ink-900);

  /* Contrast — for ghost buttons */
  --pico-contrast: var(--text-primary);
  --pico-contrast-background: transparent;
  --pico-contrast-hover: var(--text-primary);
  --pico-contrast-hover-background: var(--surface-raised);

  /* Surfaces */
  --pico-background-color: var(--surface-page);
  --pico-card-background-color: var(--surface-panel);

  /* Text */
  --pico-color: var(--text-primary);
  --pico-muted-color: var(--text-secondary);
  --pico-h1-color: var(--text-primary);
  --pico-h2-color: var(--text-primary);
  --pico-h3-color: var(--text-primary);
  --pico-h4-color: var(--text-primary);
  --pico-h5-color: var(--text-primary);
  --pico-h6-color: var(--text-primary);

  /* Borders */
  --pico-muted-border-color: var(--border-default);
  --pico-border-color: var(--border-default);

  /* Forms */
  --pico-form-element-background-color: var(--surface-page);
  --pico-form-element-border-color: var(--border-default);
  --pico-form-element-color: var(--text-primary);
  --pico-form-element-placeholder-color: var(--text-tertiary);
  --pico-form-element-active-border-color: var(--color-accent);
  --pico-form-element-focus-color: var(--color-accent);

  /* Typography */
  --pico-font-family: var(--font-body);
  --pico-font-size: var(--text-base);
  --pico-line-height: var(--leading-normal);

  /* Geometry */
  --pico-border-radius: var(--radius-sm);
  --pico-border-width: var(--hairline);

  /* Destructive actions */
  --pico-del-color: var(--color-destructive);
}

/* ============================================
   LIT SHADOW DOM BRIDGE
   Custom properties inherit through Shadow DOM
   ============================================ */

:root {
  --border-color: var(--border-default);
  --input-bg: var(--surface-page);
  --text-color: var(--text-primary);
  --focus-color: var(--color-accent);
}

/* ============================================
   GLOBAL FOCUS RING
   Never remove focus styling
   ============================================ */

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}