/* ==========================================================================
   OGNER — DESIGN SYSTEM CORE
   --------------------------------------------------------------------------
   This is the master stylesheet. It must be loaded FIRST in your stack:

     <link rel="stylesheet" href="./css/design-system.css">
     <link rel="stylesheet" href="./css/utilities.css">
     <link rel="stylesheet" href="./css/components.css">
     <link rel="stylesheet" href="./css/animations.css">
     <link rel="stylesheet" href="./css/dark.css"> <!-- AFTER light styles -->

   The dark.css file is loaded last so its overrides win the cascade.
   All other layers can be reordered freely.

   "Kinetic Sentinel" — Corporate / Modern / GRC-grade
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TAILWIND DIRECTIVES
   -------------------------------------------------------------------------- */
@tailwind base;
@tailwind components;
@tailwind utilities;


/* --------------------------------------------------------------------------
   2. DESIGN TOKENS  — LIGHT MODE  (default)
   --------------------------------------------------------------------------
   These tokens are the *single source of truth*. Every component, JS module
   and AI-generated screen MUST read from these variables. Hard-coded
   hex values are forbidden.
   -------------------------------------------------------------------------- */
:root {
  /* -------- Brand: Primary — Deep Navy "Sentinel" -------- */
  --primary:           #00030c;
  --primary-container: #003265;
  --on-primary:        #ffffff;
  --on-primary-container: #6f86ad;
  --primary-fixed:           #d5e3ff;
  --primary-fixed-dim:       #b0c7f2;
  --on-primary-fixed:        #001b3c;
  --on-primary-fixed-variant:#30476b;
  --inverse-primary:         #b0c7f2;

  /* -------- Secondary — Interactive Blue -------- */
  --secondary:                #0061a6;
  --secondary-container:      #73b4ff;
  --on-secondary:             #ffffff;
  --on-secondary-container:   #004579;
  --secondary-fixed:          #d2e4ff;
  --secondary-fixed-dim:      #a0caff;
  --on-secondary-fixed:       #001c37;
  --on-secondary-fixed-variant:#00497e;

  /* -------- Tertiary — Kinetic Gold -------- */
  --tertiary:                #070300;
  --tertiary-container:      #2b1a00;
  --on-tertiary:             #ffffff;
  --on-tertiary-container:   #b47a00;
  --tertiary-fixed:          #ffddb0;
  --tertiary-fixed-dim:      #ffba47;
  --on-tertiary-fixed:       #291800;
  --on-tertiary-fixed-variant:#614000;

  /* -------- Brand Accent -------- */
  --kinetic-gold: #fdad01;
  --kinetic-gold-bright: #ffba47;

  /* -------- Surfaces (Material 3 tonal elevation) -------- */
  --background:                 #f9f9fe;
  --on-background:              #1a1c1f;
  --surface:                    #f9f9fe;
  --surface-dim:                #d9dade;
  --surface-bright:             #f9f9fe;
  --surface-variant:            #e2e2e7;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f3f3f8;
  --surface-container:          #eeedf2;
  --surface-container-high:     #e7e8ed;
  --surface-container-highest:  #e2e2e7;
  --surface-tint:               #485f84;
  --on-surface:                 #1a1c1f;
  --on-surface-variant:         #44474e;
  --inverse-surface:            #2e3034;
  --inverse-on-surface:         #f0f0f5;

  /* -------- Outline / Borders -------- */
  --outline:          #74777f;
  --outline-variant:  #c4c6cf;
  --outline-focus:    #485f84;

  /* -------- Semantic — Status -------- */
  --success:               #0a7c2f;
  --success-container:     #c8efd0;
  --on-success:            #ffffff;
  --on-success-container:  #002111;

  --warning:               #e65100;
  --warning-container:     #ffdcc2;
  --on-warning:            #ffffff;
  --on-warning-container:  #4a1a00;

  --error:                 #ba1a1a;
  --error-container:       #ffdad6;
  --on-error:              #ffffff;
  --on-error-container:    #410002;

  --info:                  #0061a6;
  --info-container:        #d2e4ff;
  --on-info:               #ffffff;
  --on-info-container:     #001c37;

  /* -------- Typography tokens (Material 3 type scale) -------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 48px;        --lh-display: 52.8px;     --fw-display: 800; --ls-display: -0.02em;
  --fs-headline-lg: 32px;    --lh-headline-lg: 38.4px; --fw-headline-lg: 700; --ls-headline-lg: -0.01em;
  --fs-headline-md: 24px;    --lh-headline-md: 31.2px; --fw-headline-md: 600;
  --fs-headline-sm: 20px;    --lh-headline-sm: 28px;   --fw-headline-sm: 600;
  --fs-title-lg: 18px;       --lh-title-lg: 25.2px;    --fw-title-lg: 600;
  --fs-title-md: 16px;       --lh-title-md: 24px;      --fw-title-md: 600;
  --fs-body-lg: 18px;        --lh-body-lg: 28.8px;     --fw-body-lg: 400;
  --fs-body-md: 16px;        --lh-body-md: 25.6px;     --fw-body-md: 400;
  --fs-body-sm: 14px;        --lh-body-sm: 21px;       --fw-body-sm: 400;
  --fs-body-xs: 12px;        --lh-body-xs: 16.8px;     --fw-body-xs: 400;
  --fs-label-lg: 16px;       --lh-label-lg: 16px;       --fw-label-lg: 600; --ls-label-lg: 0.05em;
  --fs-label-md: 14px;       --lh-label-md: 14px;       --fw-label-md: 600; --ls-label-md: 0.05em;
  --fs-label-xs: 10px;       --lh-label-xs: 10px;       --fw-label-xs: 700; --ls-label-xs: 0.1em;

  /* -------- Radius scale -------- */
  --radius-none:   0;
  --radius-sm:     0.125rem;
  --radius:        0.25rem;
  --radius-md:     0.375rem;
  --radius-lg:     0.5rem;
  --radius-xl:     0.75rem;
  --radius-2xl:    1rem;
  --radius-3xl:    1.5rem;
  --radius-full:   9999px;

  /* -------- Spacing scale (4-pt grid + semantic) -------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --space-xs: 0.25rem;
  --space-base: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-gutter: 1.5rem;
  --space-margin-mobile: 1rem;
  --space-margin-desktop: 2rem;

  /* -------- Shadows (light mode) -------- */
  --shadow-xs:  0 1px 2px 0 rgba(26, 28, 31, 0.05);
  --shadow-sm:  0 1px 3px 0 rgba(26, 28, 31, 0.08), 0 1px 2px -1px rgba(26, 28, 31, 0.05);
  --shadow:     0 2px 4px 0 rgba(26, 28, 31, 0.06), 0 1px 2px 0 rgba(26, 28, 31, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(26, 28, 31, 0.08), 0 2px 4px -2px rgba(26, 28, 31, 0.05);
  --shadow-lg:  0 10px 15px -3px rgba(26, 28, 31, 0.10), 0 4px 6px -4px rgba(26, 28, 31, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(26, 28, 31, 0.12), 0 8px 10px -6px rgba(26, 28, 31, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(26, 28, 31, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(26, 28, 31, 0.05);

  /* Tonal layered shadows (Material 3) */
  --shadow-tonal-1: 0 1px 2px 0 rgba(26, 28, 31, 0.05), 0 1px 3px 0 rgba(26, 28, 31, 0.05);
  --shadow-tonal-2: 0 1px 2px 0 rgba(26, 28, 31, 0.10), 0 2px 6px 2px rgba(26, 28, 31, 0.05);
  --shadow-tonal-3: 0 4px 8px 3px rgba(26, 28, 31, 0.10), 0 1px 3px 0 rgba(26, 28, 31, 0.08);
  --shadow-tonal-4: 0 6px 10px 4px rgba(26, 28, 31, 0.10), 0 2px 3px 0 rgba(26, 28, 31, 0.08);
  --shadow-tonal-5: 0 8px 12px 6px rgba(26, 28, 31, 0.10), 0 4px 4px 0 rgba(26, 28, 31, 0.08);

  --shadow-focus-primary:   0 0 0 3px rgba(0, 6, 24, 0.15);
  --shadow-focus-secondary: 0 0 0 3px rgba(0, 97, 166, 0.20);
  --shadow-focus-success:   0 0 0 3px rgba(10, 124, 47, 0.20);
  --shadow-focus-warning:   0 0 0 3px rgba(230, 81, 0, 0.20);
  --shadow-focus-error:     0 0 0 3px rgba(186, 26, 26, 0.20);
  --shadow-focus-gold:      0 0 0 3px rgba(253, 173, 1, 0.40);

  --shadow-glow-gold: 0 0 24px rgba(253, 173, 1, 0.40);

  /* -------- Z-index scale -------- */
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-sidebar-backdrop: 1240;
  --z-sidebar: 1250;
  --z-header-backdrop: 1280;
  --z-header: 1290;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-toast: 1600;
  --z-tooltip: 1700;
  --z-command-palette: 1800;

  /* -------- Animation -------- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);

  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* -------- Layout dimensions -------- */
  --sidebar-width:           16rem;  /* 256px */
  --sidebar-width-mini:       4rem;  /*  64px */
  --sidebar-width-wide:      20rem;  /* 320px */
  --header-height:           4rem;   /*  64px */
  --topbar-height:           3.5rem; /*  56px */
  --footer-height:           3rem;   /*  48px */
  --bottom-nav-height:       4rem;   /*  64px */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1320px;
  --container-prose: 65ch;

  /* -------- Tap target / touch -------- */
  --tap-target-min: 44px;

  /* -------- Gradients -------- */
  --gradient-gold:    linear-gradient(135deg, #fdad01 0%, #ffba47 100%);
  --gradient-gold-shimmer: linear-gradient(90deg, #fdad01 0%, #ffddb0 50%, #fdad01 100%);
  --gradient-primary: linear-gradient(135deg, #00030c 0%, #003265 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
  --gradient-hero:    linear-gradient(135deg, #f9f9fe 0%, #e7e8ed 50%, #d2e4ff 100%);

  /* -------- Misc -------- */
  --scrollbar-width: 6px;
  --scrollbar-thumb: var(--outline-variant);
  --scrollbar-thumb-hover: var(--outline);
  --scrollbar-track: transparent;

  --selection-bg: var(--secondary-container);
  --selection-fg: var(--on-secondary-container);

  color-scheme: light;
}


/* --------------------------------------------------------------------------
   3. BASE / RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--outline-variant);
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--background);
  color: var(--on-background);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-body-md);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  overflow-x: hidden;
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Headings reset */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

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

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

button {
  background: transparent;
  cursor: pointer;
  padding: 0;
  border: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

ol, ul, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-color: inherit;
  text-indent: 0;
  border-spacing: 0;
}

[hidden] { display: none !important; }

/* Focus visible (only for keyboard) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--outline-focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Better defaults for code & pre */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 1em;
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES (semantic classes)
   -------------------------------------------------------------------------- */
.k-text-display     { font-size: var(--fs-display);     line-height: var(--lh-display);     font-weight: var(--fw-display);     letter-spacing: var(--ls-display); }
.k-text-headline-lg { font-size: var(--fs-headline-lg); line-height: var(--lh-headline-lg); font-weight: var(--fw-headline-lg); letter-spacing: var(--ls-headline-lg); }
.k-text-headline-md { font-size: var(--fs-headline-md); line-height: var(--lh-headline-md); font-weight: var(--fw-headline-md); }
.k-text-headline-sm { font-size: var(--fs-headline-sm); line-height: var(--lh-headline-sm); font-weight: var(--fw-headline-sm); }
.k-text-title-lg    { font-size: var(--fs-title-lg);    line-height: var(--lh-title-lg);    font-weight: var(--fw-title-lg); }
.k-text-title-md    { font-size: var(--fs-title-md);    line-height: var(--lh-title-md);    font-weight: var(--fw-title-md); }
.k-text-body-lg     { font-size: var(--fs-body-lg);     line-height: var(--lh-body-lg);     font-weight: var(--fw-body-lg); }
.k-text-body-md     { font-size: var(--fs-body-md);     line-height: var(--lh-body-md);     font-weight: var(--fw-body-md); }
.k-text-body-sm     { font-size: var(--fs-body-sm);     line-height: var(--lh-body-sm);     font-weight: var(--fw-body-sm); }
.k-text-body-xs     { font-size: var(--fs-body-xs);     line-height: var(--lh-body-xs);     font-weight: var(--fw-body-xs); }
.k-text-label-lg    { font-size: var(--fs-label-lg);    line-height: var(--lh-label-lg);    font-weight: var(--fw-label-lg);    letter-spacing: var(--ls-label-lg); }
.k-text-label-md    { font-size: var(--fs-label-md);    line-height: var(--lh-label-md);    font-weight: var(--fw-label-md);    letter-spacing: var(--ls-label-md); }
.k-text-label-xs    { font-size: var(--fs-label-xs);    line-height: var(--lh-label-xs);    font-weight: var(--fw-label-xs);    letter-spacing: var(--ls-label-xs); text-transform: uppercase; }
.k-text-code        { font-family: var(--font-mono); font-size: var(--fs-body-sm); line-height: 1.5; }


/* --------------------------------------------------------------------------
   5. SEMANTIC COLOR HELPERS
   -------------------------------------------------------------------------- */
.k-bg-page          { background-color: var(--background); }
.k-bg-surface       { background-color: var(--surface); }
.k-bg-card          { background-color: var(--surface-container-lowest); }
.k-bg-card-elevated { background-color: var(--surface-container-low); }
.k-bg-hover         { background-color: var(--surface-container-high); }
.k-bg-active        { background-color: var(--surface-container-highest); }

.k-fg-default       { color: var(--on-surface); }
.k-fg-muted         { color: var(--on-surface-variant); }
.k-fg-disabled      { color: var(--outline); }
.k-fg-primary       { color: var(--primary); }
.k-fg-secondary     { color: var(--secondary); }
.k-fg-success       { color: var(--success); }
.k-fg-warning       { color: var(--warning); }
.k-fg-error         { color: var(--error); }
.k-fg-gold          { color: var(--kinetic-gold); }

.k-border-default   { border-color: var(--outline-variant); }
.k-border-strong    { border-color: var(--outline); }
.k-border-focus     { border-color: var(--outline-focus); }


/* --------------------------------------------------------------------------
   6. COMPONENT-LIKE BASE  (layer for component CSS to live in)
   -------------------------------------------------------------------------- */
@layer components {
  .k-card {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .k-card-elevated {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-tonal-2);
  }
  .k-card-interactive {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 200ms var(--ease-default),
                transform 200ms var(--ease-default),
                border-color 200ms var(--ease-default);
  }
  .k-card-interactive:hover {
    border-color: var(--outline);
    box-shadow: var(--shadow-tonal-3);
    transform: translateY(-1px);
  }
}


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


/* --------------------------------------------------------------------------
   8. PRINT
   -------------------------------------------------------------------------- */
@media print {
  body { background: white; color: black; }
  .k-no-print, .k-sidebar, .k-header, .k-toast, .k-modal { display: none !important; }
}


/* --------------------------------------------------------------------------
   9. HIGH-CONTRAST / FORCED COLORS
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}