@import url("../vendor/fonts/fonts.css");
/* ============================================================================
   KR CONSULTING PORTAL — TOKEN LAYER
   Owner: DESIGN-SHELL. Every other stylesheet consumes ONLY these names.
   Light palette lives on bare :root. The dark palette is emitted verbatim in
   BOTH @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
   AND :root[data-theme="dark"] so the toggle wins in both directions.
   No colour gets its only definition inside a media query.
   ========================================================================= */

/* --- animatable custom properties for the login sheen (progressive) ------ */
@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 18%; }

/* ============================== LIGHT ==================================== */
:root {
  /* --- surfaces --- */
  --bg:         #F4F5F7;   /* cool anodized paper */
  --bg-elev:    #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #E8EAEE;   /* rails, table headers, inset wells */
  --border:     #C3C9D2;   /* hairline separators — decorative only */
  --border-hi:  #8B93A1;   /* interactive boundaries, focus edges */

  /* --- text --- */
  --text:       #14171D;
  --text-dim:   #575E6B;
  --text-mute:  #626A77;

  /* --- accent: copper --- */
  --accent:     #F5A524;
  --accent-hi:  #D98A12;
  --accent-dim: #FDF1DA;
  --on-accent:  #14171D;
  --accent-text: #8A5A00;   /* AA-safe amber for text on light (5.43:1) */

  /* --- semantic --- */
  --ok:         #1F7A4C;
  --warn:       #8A5A00;   /* never a filled button background */
  --danger:     #C0292F;

  /* --- additive (safe extension, other agents may use) --- */
  --accent-soft: rgba(245, 165, 36, .18);
  --danger-soft: rgba(192, 41, 47, .12);
  --ok-soft:     rgba(31, 122, 76, .12);
  --warn-soft:   rgba(138, 90, 0, .10);
  --scrim:       rgba(12, 18, 21, .46);
  --hairline:    rgba(18, 23, 26, .07);
  --sel:         #F5A524;
  --on-sel:      #FFFFFF;
  --grid:        rgba(18, 23, 26, .045);

  /* --- file-type colours --- */
  --ft-dxf:   #1D6F8F;
  --ft-step:  #6B4FA8;
  --ft-pdf:   #C0292F;
  --ft-sheet: #1F7A4C;
  --ft-doc:   #1E5AA8;
  --ft-zip:   #8A5A00;
  --ft-nc:    #F5A524;
  --ft-img:   #B03F7A;
  --ft-txt:   #626A77;

  /* --- radius --- */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-lg:  14px;
  --radius-pill: 100px;

  /* --- elevation (cool grey-blue, never pure black) --- */
  --shadow-1: 0 1px 1px rgba(11,17,20,.04), 0 2px 6px -1px rgba(11,17,20,.08);
  --shadow-2: 0 8px 14px -6px rgba(11,17,20,.10), 0 24px 48px -14px rgba(11,17,20,.20);

  /* --- motion --- */
  --ease:        cubic-bezier(.2,.6,.3,1);
  --dur-fast:    120ms;
  --dur:         160ms;
  --dur-slow:    240ms;
  --ease-in:     cubic-bezier(.4,0,1,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.28,.52,1);
  --dur-press:   90ms;

  /* --- type --- */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

  /* --- spacing: 4px base --- */
  --sp-0-5:  2px;
  --sp-1:    4px;
  --sp-1-5:  6px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;

  /* --- fixed layout metrics --- */
  --topbar-h:  56px;
  --sidebar-w: 248px;
  --row-h:     40px;
  --tile-w:   148px;
  --tile-h:   164px;
  --gutter: var(--sp-6);

  color-scheme: light;
}

/* ============================== DARK ===================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #14171D;
    --bg-elev:    #1C2027;
    --surface:    #1C2027;
    --surface-2:  #252A33;
    --border:     #2E3540;
    --border-hi:  #575E6B;

    --text:       #E8EAEE;
    --text-dim:   #C3C9D2;
    --text-mute:  #8B93A1;

    --accent:     #F5A524;
    --accent-hi:  #FFB53D;
    --accent-dim: #3A2A12;
    --on-accent:  #14171D;
    --accent-text: #F5A524;  /* brand amber is 8.79:1 on graphite */

    --ok:         #4FBF87;
    --warn:       #D9A63C;
    --danger:     #F1696D;

    --accent-soft: rgba(245, 165, 36, .24);
    --danger-soft: rgba(241, 105, 109, .16);
    --ok-soft:     rgba(79, 191, 135, .14);
    --warn-soft:   rgba(217, 166, 60, .12);
    --scrim:       rgba(3, 5, 6, .66);
    --hairline:    rgba(255, 255, 255, .05);
    --sel:         #F5A524;
    --on-sel:      #14171D;
    --grid:        rgba(232, 234, 238, .045);

    --ft-dxf:   #5FC2E0;
    --ft-step:  #B49BEF;
    --ft-pdf:   #F1696D;
    --ft-sheet: #4FBF87;
    --ft-doc:   #7EB0F5;
    --ft-zip:   #D9A63C;
    --ft-nc:    #F5A524;
    --ft-img:   #F08BC0;
    --ft-txt:   #8B93A1;

    --shadow-1: 0 1px 1px rgba(0,0,0,.50), 0 2px 6px -1px rgba(0,0,0,.55);
    --shadow-2: 0 10px 16px -8px rgba(0,0,0,.70), 0 28px 56px -16px rgba(0,0,0,.75);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:         #14171D;
  --bg-elev:    #1C2027;
  --surface:    #1C2027;
  --surface-2:  #252A33;
  --border:     #2E3540;
  --border-hi:  #575E6B;

  --text:       #E8EAEE;
  --text-dim:   #C3C9D2;
  --text-mute:  #8B93A1;

  --accent:     #F5A524;
  --accent-hi:  #FFB53D;
  --accent-dim: #3A2A12;
  --on-accent:  #14171D;
  --accent-text: #F5A524;

  --ok:         #4FBF87;
  --warn:       #D9A63C;
  --danger:     #F1696D;

  --accent-soft: rgba(245, 165, 36, .24);
  --danger-soft: rgba(241, 105, 109, .16);
  --ok-soft:     rgba(79, 191, 135, .14);
  --warn-soft:   rgba(217, 166, 60, .12);
  --scrim:       rgba(3, 5, 6, .66);
  --hairline:    rgba(255, 255, 255, .05);
  --sel:         #F5A524;
  --on-sel:      #14171D;
  --grid:        rgba(232, 234, 238, .045);

  --ft-dxf:   #5FC2E0;
  --ft-step:  #B49BEF;
  --ft-pdf:   #F1696D;
  --ft-sheet: #4FBF87;
  --ft-doc:   #7EB0F5;
  --ft-zip:   #D9A63C;
  --ft-nc:    #F5A524;
  --ft-img:   #F08BC0;
  --ft-txt:   #8B93A1;

  --shadow-1: 0 1px 1px rgba(0,0,0,.50), 0 2px 6px -1px rgba(0,0,0,.55);
  --shadow-2: 0 10px 16px -8px rgba(0,0,0,.70), 0 28px 56px -16px rgba(0,0,0,.75);

  color-scheme: dark;
}

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

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[role="list"], ol[role="list"] { list-style: none; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  background: var(--bg);            /* explicit — never transparent */
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }

a { color: var(--accent-text); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }

::selection { background: var(--sel); color: var(--on-sel); }

/* Tabular numerals everywhere numeric — the strongest "instrument" cue. */
.num, .t-meta, td.size, .mtime, .filesize, .otp input, .countdown {
  font-variant-numeric: tabular-nums;
}

/* --- type scale ---------------------------------------------------------- */
.t-page    { font-size: 26px;   font-weight: 650; line-height: 1.20; letter-spacing: -.02em; }
.t-section { font-size: 17px;   font-weight: 600; line-height: 1.30; letter-spacing: -.01em; }
.t-over    { font-size: 11px;   font-weight: 600; line-height: 1.20; letter-spacing: .08em;
             text-transform: uppercase; color: var(--text-mute); }
.t-row     { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.t-body    { font-size: 15px;   font-weight: 400; line-height: 1.55; }
.t-meta    { font-size: 12.5px; font-weight: 450; line-height: 1.30; letter-spacing: .005em;
             color: var(--text-mute); }
.t-mono    { font-family: var(--font-mono); font-size: 13px; font-weight: 450; line-height: 1.5; }

/* §1.4 — inside an --accent-dim tinted region, mute text steps up to dim
   (the single sub-4.5 pairing in the system: 4.42 → 6.58). */
.is-selected .t-meta,
.is-selected .meta,
.tint-accent .t-meta,
.tint-accent .meta { color: var(--text-dim); }

/* --- icons --------------------------------------------------------------- */
/* 24px grid, 1.5px stroke. NEVER scale the stroke — render at 16/20/24 by
   setting width/height only. At 16px bump the weight so it doesn't vanish. */
.ico {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-16 { stroke-width: 1.65; }
.ico-ft { color: var(--ft, var(--text-mute)); }
.ico-spin { animation: spin 700ms linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* file-type colour carriers */
.ft-dxf   { --ft: var(--ft-dxf); }
.ft-step  { --ft: var(--ft-step); }
.ft-pdf   { --ft: var(--ft-pdf); }
.ft-sheet { --ft: var(--ft-sheet); }
.ft-doc   { --ft: var(--ft-doc); }
.ft-zip   { --ft: var(--ft-zip); }
.ft-nc    { --ft: var(--ft-nc); }
.ft-img   { --ft: var(--ft-img); }
.ft-txt   { --ft: var(--ft-txt); }
.ft-any   { --ft: var(--text-mute); }
.ft-dir   { --ft: var(--accent); }

/* --- one focus ring definition, used everywhere -------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-soft);
  border-radius: inherit;
}

/* --- scrollbars ---------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-hi) 55%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* --- utility ------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.stack { display: flex; flex-direction: column; }
.row-h { display: flex; align-items: center; }
.spacer { flex: 1 1 auto; }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}