/* ==========================================================================
   UNVRSL Design Standards — v1
   Core design tokens, resets, and baseline utilities.
   Usage: <link rel="stylesheet" href="/design/standards/v1.css">
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1.  COLOR SYSTEM
   ---------------------------------------------------------------------------
   Each brand family exposes:
     - base brand
     - strong (darker)
     - soft  (lighter)
     - faint (very light)
   Plus semantic surfaces, text, borders, and dark-mode overrides.

   To pick a palette for your project, choose ONE of the --brand-hue-*
   values and assign it to --brand-hue, then use the ready-made derived tokens.
   --------------------------------------------------------------------------- */

:root {
  /* ---- Brand hue presets ---- */
  --brand-hue-blue:     210deg;
  --brand-hue-green:    150deg;
  --brand-hue-purple:   270deg;
  --brand-hue-red:        0deg;
  --brand-hue-orange:    30deg;
  --brand-hue-teal:     180deg;

  /* ---- Active brand ---- */
  --brand-hue:           var(--brand-hue-blue);
  --brand-chroma:        0.16;
  --brand-lightness:     0.58;

  /* ---- Brand scale ---- */
  --brand:               oklch(var(--brand-lightness)   var(--brand-chroma)               var(--brand-hue));
  --brand-strong:        color-mix(in oklch, var(--brand), black 18%);
  --brand-soft:          color-mix(in oklch, var(--brand), white 72%);
  --brand-faint:         color-mix(in oklch, var(--brand), white 92%);

  /* ---- Complementary (opposite hue + 30°) ---- */
  --complement-hue:      calc(var(--brand-hue) + 180deg);
  --complement:          oklch(0.55 0.14 var(--complement-hue));
  --complement-soft:     color-mix(in oklch, var(--complement), white 70%);
  --complement-faint:    color-mix(in oklch, var(--complement), white 90%);

  /* ---- Backgrounds ---- */
  --bg:                  oklch(0.98 0.01 var(--brand-hue));
  --surface:             oklch(0.995 0.006 var(--brand-hue));
  --surface-2:           color-mix(in oklch, var(--bg), var(--brand) 4%);
  --surface-3:           color-mix(in oklch, var(--bg), var(--brand) 8%);
  --inset:               color-mix(in oklch, var(--bg), black 2%);

  /* ---- Text ---- */
  --text:                oklch(0.22 0.02 var(--brand-hue));
  --text-strong:         oklch(0.12 0.025 var(--brand-hue));
  --text-muted:          oklch(0.45 0.02 var(--brand-hue));
  --text-faint:          oklch(0.62 0.015 var(--brand-hue));
  --text-on-brand:       oklch(0.99 0.005 0deg);

  /* ---- Borders & Rings ---- */
  --border:              color-mix(in oklch, var(--text), transparent 84%);
  --border-strong:       color-mix(in oklch, var(--text), transparent 64%);
  --border-faint:        color-mix(in oklch, var(--text), transparent 92%);
  --focus-ring:          color-mix(in oklch, var(--brand), white 35%);

  /* ---- Semantic ---- */
  --success:             oklch(0.55 0.18 150deg);
  --warning:             oklch(0.65 0.16 80deg);
  --danger:              oklch(0.55 0.20 25deg);
  --info:                oklch(0.55 0.14 210deg);

  --success-soft:        color-mix(in oklch, var(--success), white 80%);
  --warning-soft:        color-mix(in oklch, var(--warning), white 80%);
  --danger-soft:         color-mix(in oklch, var(--danger),  white 80%);
  --info-soft:           color-mix(in oklch, var(--info),    white 80%);
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:                  oklch(0.15 0.015 var(--brand-hue));
    --surface:             oklch(0.18 0.018 var(--brand-hue));
    --surface-2:           color-mix(in oklch, var(--bg), var(--brand) 6%);
    --surface-3:           color-mix(in oklch, var(--bg), var(--brand) 12%);
    --inset:               color-mix(in oklch, var(--bg), black 4%);

    --text:                oklch(0.85 0.015 var(--brand-hue));
    --text-strong:         oklch(0.95 0.01 var(--brand-hue));
    --text-muted:          oklch(0.65 0.015 var(--brand-hue));
    --text-faint:          oklch(0.50 0.012 var(--brand-hue));
    --text-on-brand:       oklch(0.12 0.02 var(--brand-hue));

    --border:              color-mix(in oklch, var(--text), transparent 76%);
    --border-strong:       color-mix(in oklch, var(--text), transparent 52%);
    --border-faint:        color-mix(in oklch, var(--text), transparent 88%);
    --focus-ring:          color-mix(in oklch, var(--brand), white 20%);

    --brand-soft:          color-mix(in oklch, var(--brand), var(--bg) 50%);
    --brand-faint:         color-mix(in oklch, var(--brand), var(--bg) 72%);

    --complement-soft:     color-mix(in oklch, var(--complement), var(--bg) 50%);
    --complement-faint:    color-mix(in oklch, var(--complement), var(--bg) 72%);
  }
}

/* ---------------------------------------------------------------------------
   2.  SPACING / SIZE SCALE
   --------------------------------------------------------------------------- */
:root {
  --space-xxs:  0.125rem;  /*  2px */
  --space-xs:   0.25rem;   /*  4px */
  --space-s:    0.5rem;    /*  8px */
  --space-m:    1rem;      /* 16px */
  --space-l:    1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-xxl:  3rem;      /* 48px */
  --space-xxxl: 4rem;      /* 64px */

  /* ---- Font sizes ---- */
  --text-xs:    0.75rem;
  --text-s:     0.875rem;
  --text-m:     1rem;
  --text-l:     1.125rem;
  --text-xl:    1.375rem;
  --text-xxl:   1.75rem;
  --text-xxxl:  2.5rem;

  /* ---- Line heights ---- */
  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-loose:   1.8;

  /* ---- Font weights ---- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Radii ---- */
  --radius-s:    0.25rem;
  --radius-m:    0.5rem;
  --radius-l:    0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 2px   rgba(0,0,0,0.06);
  --shadow-md:   0 4px 6px   rgba(0,0,0,0.07), 0 2px 4px   rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.08), 0 4px 6px   rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
}

/* ---- Opacity / Transition tokens ---- */
:root {
  --opacity-muted:   0.65;
  --opacity-faint:   0.40;
  --opacity-hidden:  0;

  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}

/* ---------------------------------------------------------------------------
   3.  Z-INDEX SYSTEM
   ---------------------------------------------------------------------------
   Flat layer names — use the CSS custom property, never a raw number.
   --------------------------------------------------------------------------- */
:root {
  --z-base:          0;
  --z-below:         -1;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-nav:           300;
  --z-overlay:       400;
  --z-modal:         500;
  --z-popover:       600;
  --z-tooltip:       700;
  --z-toast:         800;
  --z-notification:  900;
  --z-banner:        950;
  --z-emergency:     1000;
}

/* ---------------------------------------------------------------------------
   4.  RESET & BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body {
  min-height: 100dvh;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: var(--text-m);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

h1 { font-size: var(--text-xxxl); }
h2 { font-size: var(--text-xxl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-l); }

p, li, figcaption {
  max-width: 70ch;
  text-wrap: pretty;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--brand-strong); text-decoration: underline; }

/* ---- Images & media ---- */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- Forms ---- */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ---- Focus ring ---- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Selection ---- */
::selection {
  background: var(--brand-soft);
  color: var(--text-strong);
}

/* ---- Scrollbar (webkit) ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------------------------------------------------------------------------
   5.  UTILITY CLASSES
   --------------------------------------------------------------------------- */

/* ---- Spacing ---- */
.gap-xxs  { gap: var(--space-xxs); }
.gap-xs   { gap: var(--space-xs); }
.gap-s    { gap: var(--space-s); }
.gap-m    { gap: var(--space-m); }
.gap-l    { gap: var(--space-l); }
.gap-xl   { gap: var(--space-xl); }
.gap-xxl  { gap: var(--space-xxl); }
.gap-xxxl { gap: var(--space-xxxl); }

.p-xxs  { padding: var(--space-xxs); }
.p-xs   { padding: var(--space-xs); }
.p-s    { padding: var(--space-s); }
.p-m    { padding: var(--space-m); }
.p-l    { padding: var(--space-l); }
.p-xl   { padding: var(--space-xl); }
.p-xxl  { padding: var(--space-xxl); }
.p-xxxl { padding: var(--space-xxxl); }

.m-xxs  { margin: var(--space-xxs); }
.m-xs   { margin: var(--space-xs); }
.m-s    { margin: var(--space-s); }
.m-m    { margin: var(--space-m); }
.m-l    { margin: var(--space-l); }
.m-xl   { margin: var(--space-xl); }
.m-xxl  { margin: var(--space-xxl); }
.m-xxxl { margin: var(--space-xxxl); }

/* ---- Flex ---- */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1        { flex: 1; }

/* ---- Grid ---- */
.grid          { display: grid; }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4   { grid-template-columns: repeat(4, 1fr); }

/* ---- Text ---- */
.text-center   { text-align: center; }
.text-muted    { color: var(--text-muted); }
.text-faint    { color: var(--text-faint); }
.text-xs       { font-size: var(--text-xs); }
.text-s        { font-size: var(--text-s); }
.text-m        { font-size: var(--text-m); }
.text-l        { font-size: var(--text-l); }
.text-xl       { font-size: var(--text-xl); }
.text-xxl      { font-size: var(--text-xxl); }
.text-xxxl     { font-size: var(--text-xxxl); }
.weight-bold   { font-weight: var(--weight-bold); }
.weight-medium { font-weight: var(--weight-medium); }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Surface / background ---- */
.surface       { background: var(--surface); }
.surface-2     { background: var(--surface-2); }
.surface-3     { background: var(--surface-3); }
.inset         { background: var(--inset); }

/* ---- Borders ---- */
.border        { border: 1px solid var(--border); }
.border-strong { border: 1px solid var(--border-strong); }
.border-faint  { border: 1px solid var(--border-faint); }
.radius-s      { border-radius: var(--radius-s); }
.radius-m      { border-radius: var(--radius-m); }
.radius-l      { border-radius: var(--radius-l); }
.radius-full   { border-radius: var(--radius-full); }

/* ---- Shadows ---- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ---- Visibility ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-m);
}

@media (width >= 768px) { .container { padding-inline: var(--space-l); } }
@media (width >= 1200px) { .container { padding-inline: var(--space-xl); } }