/* ============================================================
   Scotlynn Design System — Core Tokens
   Dark mode by default. Brand accents only; no rainbow palettes.
   ============================================================ */

:root {
  color-scheme: dark;

  /* -------------------- BRAND ACCENTS -------------------- */
  /* Primary — Scotlynn Yellow. Buttons, active icons, focus rings, key data. */
  --brand-primary:        rgb(247, 187, 23);   /* #F7BB17 */
  --brand-primary-hover:  rgb(255, 201, 51);   /* slightly lighter on hover */
  --brand-primary-press:  rgb(214, 161, 18);   /* darker on press */
  --brand-primary-soft:   rgba(247, 187, 23, 0.14); /* fills, hover backgrounds */
  --brand-primary-ghost:  rgba(247, 187, 23, 0.08);

  /* Secondary — Orange. Hyperlinks, sub-headings, "Required" emphasis. */
  --brand-secondary:        rgb(220, 74, 38);  /* #DC4A26 */
  --brand-secondary-hover:  rgb(232, 96, 60);
  --brand-secondary-press:  rgb(190, 60, 28);
  --brand-secondary-soft:   rgba(220, 74, 38, 0.16);

  /* Tertiary — Maroon. Tags, category chips, accent surfaces. */
  --brand-tertiary:        rgb(121, 47, 62);   /* #792F3E */
  --brand-tertiary-hover:  rgb(141, 57, 75);
  --brand-tertiary-soft:   rgba(121, 47, 62, 0.30);

  /* -------------------- SURFACE / BACKGROUND -------------------- */
  --bg-base:        rgb(15, 15, 15);          /* page chrome behind everything */
  --bg-canvas:      rgb(20, 20, 20);          /* main app canvas */
  --bg-surface:     rgb(29, 29, 29);          /* cards, panels, sidebars — brand charcoal */
  --bg-surface-2:   rgb(38, 38, 38);          /* raised surface, hover row, input bg */
  --bg-surface-3:   rgb(48, 48, 48);          /* tooltip, popover, deeper hover */
  --bg-overlay:     rgba(0, 0, 0, 0.55);      /* modal scrim */

  /* -------------------- FOREGROUND / TEXT -------------------- */
  --fg-1:           rgb(245, 245, 245);       /* primary text, headings */
  --fg-2:           rgb(190, 190, 190);       /* body, secondary text */
  --fg-3:           rgb(140, 140, 140);       /* tertiary, metadata, labels */
  --fg-4:           rgb(100, 100, 100);       /* disabled, hint */
  --fg-on-primary:  rgb(29, 29, 29);          /* text on yellow */
  --fg-on-secondary: rgb(255, 255, 255);      /* text on orange */
  --fg-on-tertiary: rgb(245, 245, 245);       /* text on maroon */

  /* -------------------- BORDERS / DIVIDERS -------------------- */
  --border-1:       rgb(64, 64, 64);          /* default border / divider */
  --border-2:       rgb(48, 48, 48);          /* subtle, internal dividers */
  --border-strong:  rgb(96, 96, 96);          /* hover/focus border */
  --border-focus:   var(--brand-primary);     /* focus ring */

  /* -------------------- CATEGORY TAGS --------------------
     Muted, dark-mode tints used to differentiate content groupings
     (IT vs HR vs Operations, etc). Tuned LOW SATURATION so they sit
     beneath the brand accents and never compete with status tags
     (Required/Pinned/etc, which keep the primary brand colors).
     Pattern: --cat-<n>-soft  (fill), --cat-<n>-fg (text). */
  --cat-maroon-soft:  rgba(121, 47, 62, 0.30);   --cat-maroon-fg:  #E89AA7;  /* IT */
  --cat-slate-soft:   rgba(72, 96, 130, 0.28);   --cat-slate-fg:   #9FB6D9;  /* HR */
  --cat-olive-soft:   rgba(110, 96, 38, 0.32);   --cat-olive-fg:   #D6C079;  /* Operations */
  --cat-rust-soft:    rgba(160, 80, 50, 0.26);   --cat-rust-fg:    #E8A084;  /* Safety */
  --cat-plum-soft:    rgba(94, 58, 110, 0.32);   --cat-plum-fg:    #C3A1D4;  /* Sales */
  --cat-moss-soft:    rgba(62, 96, 70, 0.32);    --cat-moss-fg:    #95C2A2;  /* Logistics */
  --cat-graphite-soft: rgba(110, 110, 118, 0.22); --cat-graphite-fg: #B8B8C0; /* Admin / default */

  /* -------------------- STATUS (KPI / TRAFFIC LIGHT ONLY) -------------------- */
  /* Use ONLY for performance KPIs / data integrity. For simple status use brand accents. */
  --kpi-good:       rgb(46, 160, 67);
  --kpi-good-soft:  rgba(46, 160, 67, 0.18);
  --kpi-warn:       rgb(247, 187, 23);        /* same as primary on purpose */
  --kpi-warn-soft:  rgba(247, 187, 23, 0.16);
  --kpi-bad:        rgb(220, 74, 38);         /* uses secondary orange */
  --kpi-bad-soft:   rgba(220, 74, 38, 0.18);
  --kpi-neutral:    rgb(140, 140, 140);

  /* -------------------- SHADOWS -------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.55);

  /* -------------------- RADII -------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* -------------------- SPACING SCALE (4px base) -------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* -------------------- MOTION -------------------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* ============================================================
     TYPOGRAPHY
     Display/UI face: Inter (substitution — see README).
     Mono face: JetBrains Mono.
     ============================================================ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (px). Tight on the small end — corporate web app density. */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;   /* default body */
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  38px;
  --fs-5xl:  48px;

  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.50;
  --lh-loose:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.10em;  /* uppercase nav section labels e.g. "CONTENT MANAGEMENT" */
}

/* Light-mode override — only honored if the user system prefers light.
   Kept faithful: dark is the default brand experience. */
@media (prefers-color-scheme: light) {
  :root.allow-light {
    --bg-base:    rgb(247, 247, 247);
    --bg-canvas:  rgb(252, 252, 252);
    --bg-surface: rgb(255, 255, 255);
    --bg-surface-2: rgb(245, 245, 245);
    --bg-surface-3: rgb(235, 235, 235);
    --fg-1: rgb(29, 29, 29);
    --fg-2: rgb(70, 70, 70);
    --fg-3: rgb(110, 110, 110);
    --fg-4: rgb(150, 150, 150);
    --border-1: rgb(220, 220, 220);
    --border-2: rgb(235, 235, 235);
    --border-strong: rgb(180, 180, 180);
  }
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

/* Sub-heading — uses brand secondary (orange) per brand rules. */
.subheading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-secondary);
}

/* Eyebrow / section label used in nav rails. */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}

a, .link {
  color: var(--brand-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover { color: var(--brand-secondary-hover); }
a:active, .link:active { color: var(--brand-secondary-press); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--brand-primary-soft);
  color: var(--fg-1);
}

:focus-visible {
  outline: none;
}