/* ============================================================
   af-dashboard / Design System Tokens
   Proxy-Seller / Geonix · Compact density · Light + Dark
   ============================================================ */

:root {
  /* ---------- Type ---------- */
  --font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* 6-step type scale (px) — compact, working tool */
  --fs-xs:   11px;   /* labels, meta, caption */
  --fs-sm:   12px;   /* table cells, secondary */
  --fs-base: 13px;   /* body, inputs, buttons */
  --fs-md:   14px;   /* section heads, card titles */
  --fs-lg:   18px;   /* page titles */
  --fs-xl:   28px;   /* hero metric numbers */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;

  --tracking-label: 0.04em;

  /* ---------- Spacing (4px grid) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* ---------- Radius (3-tier balanced) ---------- */
  --r-sm: 6px;   /* badges, chips, small buttons, inputs */
  --r-md: 8px;   /* buttons, cards, table-wrap */
  --r-lg: 12px;  /* modals, drawers, popovers */
  --r-pill: 999px;
  --r-full: 9999px;

  /* ---------- Density (compact default) ---------- */
  --row-h:        36px;  /* table row */
  --control-h:    32px;  /* button, input, select */
  --control-h-sm: 26px;  /* small chip / inline button */
  --pad-cell-y:   8px;
  --pad-cell-x:   12px;
  --pad-card:     16px;
  --pad-modal:    20px;
  --pad-page-y:   20px;
  --pad-page-x:   24px;
  --pad-control-x: 12px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  240ms;

  /* ---------- Z ---------- */
  --z-nav: 30;
  --z-sticky: 40;
  --z-popover: 60;
  --z-drawer: 80;
  --z-modal: 100;
  --z-toast: 120;

  /* ---------- Accent (default: Proxy-Seller green, professionalized) ---------- */
  /* Brand #35BE70 desaturated to operate well in dense data UI */
  --accent-50:  #ECF8F0;
  --accent-100: #D6F0DF;
  --accent-200: #A8E0BC;
  --accent-300: #6EC891;
  --accent-400: #3EB373;
  --accent-500: #2EA563;   /* primary */
  --accent-600: #258A52;
  --accent-700: #1E6F42;
  --accent-on:  #FFFFFF;
}

/* ===== Light theme (default) ===== */
:root,
[data-theme="light"] {
  --bg:          #FFFFFF;
  --bg-app:      #FAFAFA;       /* page background */
  --bg-elev:    #FFFFFF;        /* card surface */
  --bg-elev-2:  #F6F7F8;        /* nested surface, header row */
  --bg-hover:   #F4F5F6;
  --bg-active:  #EDEEF0;
  --bg-disabled:#F4F5F6;

  --line:       #ECEDEF;        /* hairline divider */
  --line-strong:#E2E4E7;        /* default border */
  --line-focus: var(--accent-500);

  --fg:         #0E1116;        /* primary text */
  --fg-muted:   #4B5563;        /* secondary */
  --fg-subtle:  #6B7280;        /* tertiary, label */
  --fg-faint:   #9AA1AB;        /* placeholder */
  --fg-on-accent: #FFFFFF;

  /* Semantic */
  --success:    #1E8E54;
  --success-bg: #E8F6EE;
  --success-fg: #15673D;

  --warn:       #B7791F;
  --warn-bg:    #FBF1DA;
  --warn-fg:    #8A5A12;

  --danger:     #C03A2B;
  --danger-bg:  #FBEAE7;
  --danger-fg:  #8E2A1E;

  --info:       #2563EB;
  --info-bg:    #E6EEFC;
  --info-fg:    #1D4FBE;

  /* Project badge palette (PS / GX / YP / P4) — desaturated, matched to system */
  --proj-ps:    #E07A1A;   /* proxy-seller orange */
  --proj-ps-bg: #FBEEDB;
  --proj-gx:    #2EA563;   /* geonix green */
  --proj-gx-bg: #E5F3EB;
  --proj-yp:    #6E5BD9;   /* youproxy violet */
  --proj-yp-bg: #ECE9FA;
  --proj-p4:    #B7791F;   /* proxy-ipv4 amber */
  --proj-p4-bg: #FBF1DA;

  /* Shadows — restrained, near-Linear */
  --shadow-1: 0 1px 2px rgba(15, 18, 25, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 18, 25, 0.06), 0 1px 2px rgba(15, 18, 25, 0.04);
  --shadow-3: 0 12px 32px rgba(15, 18, 25, 0.10), 0 2px 6px rgba(15, 18, 25, 0.06);
  --shadow-pop: 0 8px 24px rgba(15, 18, 25, 0.08), 0 1px 2px rgba(15, 18, 25, 0.04);

  --ring: 0 0 0 3px color-mix(in oklab, var(--accent-500) 22%, transparent);
}

/* ===== Dark theme — near-black, Linear-feel ===== */
[data-theme="dark"] {
  --bg:          #0E0F12;
  --bg-app:      #0A0B0D;
  --bg-elev:     #131418;
  --bg-elev-2:   #1A1C21;
  --bg-hover:    #1E2026;
  --bg-active:   #25272E;
  --bg-disabled: #16181C;

  --line:        #20232A;
  --line-strong: #2A2D35;
  --line-focus:  var(--accent-400);

  --fg:          #ECEEF2;
  --fg-muted:    #9CA3AF;
  --fg-subtle:   #8A919C;  /* was #7B828D — bumped for AA contrast on dark bg */
  --fg-faint:    #707782;  /* was #5A6068 — was failing AA on dark bg */
  --fg-on-accent:#FFFFFF;

  --success:    #2EBF6F;
  --success-bg: rgba(46, 191, 111, 0.12);
  --success-fg: #6EDB9C;

  --warn:       #D49A2C;
  --warn-bg:    rgba(212, 154, 44, 0.12);
  --warn-fg:    #E8B85A;

  --danger:     #E4574A;
  --danger-bg:  rgba(228, 87, 74, 0.12);
  --danger-fg:  #F08778;

  --info:       #4D8AF5;
  --info-bg:    rgba(77, 138, 245, 0.12);
  --info-fg:    #7AA8F7;

  --proj-ps:    #F09A45;
  --proj-ps-bg: rgba(240, 154, 69, 0.14);
  --proj-gx:    #3FBD7A;
  --proj-gx-bg: rgba(63, 189, 122, 0.14);
  --proj-yp:    #9588E6;
  --proj-yp-bg: rgba(149, 136, 230, 0.14);
  --proj-p4:    #D49A2C;
  --proj-p4-bg: rgba(212, 154, 44, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);

  --ring: 0 0 0 3px color-mix(in oklab, var(--accent-400) 28%, transparent);
}

/* ===== Density variants ===== */
[data-density="comfortable"] {
  --row-h: 40px;
  --control-h: 34px;
  --control-h-sm: 28px;
  --pad-cell-y: 10px;
  --pad-cell-x: 14px;
  --pad-card: 20px;
  --pad-modal: 24px;
}

/* ===== Radius variants ===== */
[data-radius="sharp"]  { --r-sm: 4px; --r-md: 6px; --r-lg: 8px; }
[data-radius="medium"] { --r-sm: 6px; --r-md: 8px; --r-lg: 12px; }
[data-radius="soft"]   { --r-sm: 8px; --r-md: 12px; --r-lg: 16px; }

/* ===== Accent presets ===== */
[data-accent="green"] {
  --accent-50: #ECF8F0; --accent-100: #D6F0DF; --accent-200: #A8E0BC;
  --accent-300: #6EC891; --accent-400: #3EB373; --accent-500: #2EA563;
  --accent-600: #258A52; --accent-700: #1E6F42;
}
[data-accent="orange"] {
  --accent-50: #FEF1E2; --accent-100: #FCDFBE; --accent-200: #F8BF7E;
  --accent-300: #F39E47; --accent-400: #ED821F; --accent-500: #D87113;
  --accent-600: #B25C0E; --accent-700: #87470B;
}
[data-accent="indigo"] {
  --accent-50: #EEF0FB; --accent-100: #DCE0F7; --accent-200: #B5BDEF;
  --accent-300: #8C97E4; --accent-400: #6B77D8; --accent-500: #5159C7;
  --accent-600: #4148A8; --accent-700: #333884;
}
[data-accent="blue"] {
  --accent-50: #E8F1FE; --accent-100: #CFE2FC; --accent-200: #9EC4F8;
  --accent-300: #6EA4F0; --accent-400: #4D88E8; --accent-500: #3672D4;
  --accent-600: #285CB2; --accent-700: #1F488C;
}

/* ===== Font family variants ===== */
[data-font="inter"] { --font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
[data-font="geist"] { --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif; }
[data-font="ibm"]   { --font-sans: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklab, var(--accent-500) 30%, transparent); }

/* Focus ring (universal) */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent-500) !important;
}

/* Scrollbar — minimal */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* ============================================================
   Utility primitives (shared)
   ============================================================ */
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.uppercase-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.faint { color: var(--fg-faint); }

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}