/* ==========================================
   CLAMO UI — DESIGN TOKENS + TYPE
   Source: GetClamo/clamo-ui globals.css (Lima registry)
   Production-grade OKLCH tokens for legal tech dashboards.
   ========================================== */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./fonts/PPNeueMontreal-Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./fonts/PPNeueMontreal-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./fonts/PPNeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./fonts/PPNeueMontreal-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./fonts/PPNeueMontreal-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./fonts/PPNeueMontreal-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./fonts/PPNeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- TONAL SCALES ---------- */
:root {
  /* Neutral (chroma = 0) */
  --neutral-0:   oklch(1    0 0);
  --neutral-50:  oklch(0.98 0 0);
  --neutral-75:  oklch(0.97 0 0);
  --neutral-100: oklch(0.95 0 0);
  --neutral-150: oklch(0.925 0 0);
  --neutral-200: oklch(0.90 0 0);
  --neutral-250: oklch(0.86 0 0);
  --neutral-300: oklch(0.82 0 0);
  --neutral-400: oklch(0.72 0 0);
  --neutral-500: oklch(0.62 0 0);
  --neutral-550: oklch(0.57 0 0);
  --neutral-600: oklch(0.52 0 0);
  --neutral-700: oklch(0.42 0 0);
  --neutral-800: oklch(0.32 0 0);
  --neutral-850: oklch(0.27 0 0);
  --neutral-900: oklch(0.22 0 0);
  --neutral-950: oklch(0.14 0 0);
  --neutral-1000: oklch(0 0 0);

  /* Brand — #34495E (slate blue) locked at h=254° · low chroma */
  --brand-50:  oklch(0.96 0.008 254);
  --brand-100: oklch(0.92 0.012 254);
  --brand-200: oklch(0.85 0.018 254);
  --brand-300: oklch(0.74 0.025 254);
  --brand-400: oklch(0.62 0.032 254);
  --brand-500: oklch(0.50 0.036 254);
  --brand-600: oklch(0.39 0.035 254); /* PRIMARY — #34495E */
  --brand-700: oklch(0.33 0.032 254);
  --brand-800: oklch(0.26 0.028 254);
  --brand-900: oklch(0.20 0.022 254);
  --brand-950: oklch(0.15 0.016 254);
  --brand-tint-50:  oklch(0.97 0.006 254);
  --brand-tint-100: oklch(0.94 0.010 254);
  --brand-tint-150: oklch(0.91 0.014 254);

  /* Semantics — two rails each (solid + tint) */
  --info-100: oklch(0.90 0.07 230);
  --info-600: oklch(0.48 0.19 230);
  --info-700: oklch(0.40 0.18 230);
  --info-900: oklch(0.24 0.13 230);
  --info-tint-50:  oklch(0.97 0.02 230);
  --info-tint-100: oklch(0.93 0.03 230);

  --success-100: oklch(0.90 0.07 150);
  --success-600: oklch(0.52 0.17 150);
  --success-700: oklch(0.44 0.16 150);
  --success-900: oklch(0.28 0.12 150);
  --success-tint-50:  oklch(0.97 0.02 150);
  --success-tint-100: oklch(0.93 0.03 150);

  --warning-100: oklch(0.90 0.08 85);
  --warning-600: oklch(0.60 0.19 85);
  --warning-700: oklch(0.52 0.18 85);
  --warning-900: oklch(0.36 0.14 85);
  --warning-tint-50:  oklch(0.97 0.02 85);
  --warning-tint-100: oklch(0.93 0.04 85);

  --danger-100: oklch(0.90 0.08 25);
  --danger-600: oklch(0.55 0.22 25);
  --danger-700: oklch(0.47 0.20 25);
  --danger-900: oklch(0.31 0.15 25);
  --danger-tint-50:  oklch(0.97 0.02 25);
  --danger-tint-100: oklch(0.93 0.04 25);
}

/* ---------- ROLES (LIGHT) ---------- */
:root {
  --bg-base: var(--neutral-75);
  --bg-subtle: var(--neutral-100);
  --surface-1: var(--neutral-0);
  --surface-2: var(--neutral-50);
  --surface-3: var(--neutral-150);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-600);
  --text-on-brand: var(--neutral-0);

  --border-subtle: var(--neutral-250);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-600);

  --focus-ring: var(--brand-500);
  --focus-ring-offset: var(--neutral-0);

  /* Buttons */
  --btn-primary-bg: var(--brand-600);
  --btn-primary-text: var(--neutral-0);
  --btn-primary-hover-bg: var(--brand-700);
  --btn-secondary-bg: var(--neutral-200);
  --btn-secondary-text: var(--neutral-900);
  --btn-secondary-hover-bg: var(--neutral-300);
  --btn-ghost-text: var(--brand-700);
  --btn-ghost-hover-bg: var(--neutral-100);
  --btn-danger-bg: var(--danger-700);
  --btn-danger-text: var(--neutral-0);
  --btn-danger-hover-bg: var(--danger-800, oklch(0.39 0.18 25));

  /* Alerts */
  --alert-info-bg: var(--info-tint-50);
  --alert-info-text: var(--info-900);
  --alert-info-icon: var(--info-700);
  --alert-success-bg: var(--success-tint-50);
  --alert-success-text: var(--success-900);
  --alert-success-icon: var(--success-700);
  --alert-warning-bg: var(--warning-tint-50);
  --alert-warning-text: var(--warning-900);
  --alert-warning-icon: var(--warning-700);
  --alert-danger-bg: var(--danger-tint-50);
  --alert-danger-text: var(--danger-900);
  --alert-danger-icon: var(--danger-700);

  /* Elevation */
  --elev-1-shadow: 0 1px 2px -1px oklch(0.25 0 0 / .16),
                   0 1px 1px oklch(0.25 0 0 / .10);
  --elev-2-shadow: 0 6px 12px -2px oklch(0.25 0 0 / .18),
                   0 3px 6px -2px oklch(0.25 0 0 / .12);
  --elev-3-shadow: 0 12px 20px -4px oklch(0.25 0 0 / .22),
                   0 6px 10px -4px oklch(0.25 0 0 / .14);

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --motion-slower: 360ms;
  --ease-enter: cubic-bezier(.2, .8, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-standard: cubic-bezier(.16, 1, .3, 1);

  /* Spacing (8pt + form-specific 20/28) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Borders */
  --border-width-subtle: 1px;
  --border-width-default: 2px; /* Clamo signature geometric border */
  --border-width-strong: 3px;

  /* Hit target */
  --hit-target-min: 40px;

  /* Typography family */
  --font-sans: "PP Neue Montreal", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale (13-60px, 1.125 step with intentional breaks for display) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-body: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
}

/* ---------- ROLES (DARK) ---------- */
.dark {
  --bg-base: #202020;
  --bg-subtle: #1e1e1e;
  --surface-1: #181818;
  --surface-2: #606060;
  --surface-3: #787878;
  --header-bg: #282828;

  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-on-brand: var(--neutral-0);

  --border-subtle: #2a2a2a;
  --border-default: #353535;
  --border-strong: #4d4d4d;

  --focus-ring: oklch(0.62 0.035 254);

  --btn-primary-bg: oklch(0.45 0.040 254);
  --btn-primary-text: var(--neutral-0);
  --btn-primary-hover-bg: oklch(0.52 0.045 254);
  --btn-secondary-bg: #525252;
  --btn-secondary-text: var(--neutral-100);
  --btn-secondary-hover-bg: #6b6b6b;
  --btn-ghost-text: oklch(0.78 0.030 254);
  --btn-ghost-hover-bg: #252525;
  --btn-danger-bg: oklch(0.55 0.22 25);
  --btn-danger-text: var(--neutral-0);
  --btn-danger-hover-bg: oklch(0.47 0.20 25);

  --alert-info-bg:    oklch(0.25 0.012 230);
  --alert-info-text:  oklch(0.95 0.04 230);
  --alert-info-icon:  oklch(0.72 0.14 230);
  --alert-success-bg:  oklch(0.27 0.012 150);
  --alert-success-text: oklch(0.95 0.04 150);
  --alert-success-icon: oklch(0.74 0.14 150);
  --alert-warning-bg:  oklch(0.33 0.016 85);
  --alert-warning-text: oklch(0.95 0.04 85);
  --alert-warning-icon: oklch(0.68 0.12 85);
  --alert-danger-bg:   oklch(0.29 0.014 25);
  --alert-danger-text: oklch(0.95 0.04 25);
  --alert-danger-icon: oklch(0.74 0.16 25);

  --elev-1-shadow: 0 2px 4px -1px oklch(0 0 0 / .5),
                   inset 0 1px 0 oklch(1 0 0 / .06);
  --elev-2-shadow: 0 10px 16px -2px oklch(0 0 0 / .5),
                   inset 0 1px 0 oklch(1 0 0 / .07);
  --elev-3-shadow: 0 20px 28px -4px oklch(0 0 0 / .5),
                   inset 0 1px 0 oklch(1 0 0 / .08);

  /* Dark mode drops the 2px emphasis border to 1px to reduce chalk-lines */
  --border-width-default: 1px;
}

/* ---------- BASE ---------- */
html, body { background: var(--bg-base); color: var(--text-primary); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-600); color: var(--neutral-0); }
.dark ::selection { background: oklch(0.52 0.040 254); color: var(--neutral-0); }

/* ---------- KEYFRAMES ---------- */
@keyframes fade-up      { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes scale-in     { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer      { 0%{background-position:-200% 0} 60%,100%{background-position:200% 0} }
@keyframes geometric-lift { to { transform: translate(2px,-2px); } }
@keyframes pulse-subtle { 0%,100%{opacity:1} 50%{opacity:.7} }