/* ============================================================
   Gestion Design Tokens — CSS Custom Properties  (v1.1.0)
   ------------------------------------------------------------
   Source of truth: design-tokens/tokens.json
   Colours derived from the official four-colour Gestion logo.

   Usage (Laravel / Blade / any PHP view):
     <link rel="stylesheet" href="<?= base_url('design-tokens/gestion-tokens.css') ?>">
     ... color: var(--gx-brand);  background: var(--gx-module-people);
   All tokens are namespaced --gx-* to avoid clashing with
   Bootstrap / Perfex variables.
   ============================================================ */

:root {
  /* ============ BRAND (logo colours) ============ */
  --gx-brand-blue:   #018CD0;   /* People  */
  --gx-brand-green:  #3DB444;   /* Projects / bankable */
  --gx-brand-orange: #FE971C;   /* Finance / primary tint */
  --gx-brand-red:    #D30A1C;   /* Assets  */
  --gx-brand-ink:    #25323D;   /* Wordmark slate */

  /* ============ COLOR SCALES ============ */
  /* ---- Orange (primary action) ---- */
  --gx-orange-50:  #FFF4E5;
  --gx-orange-100: #FEE4C2;
  --gx-orange-200: #FDCD8C;
  --gx-orange-300: #FEB152;
  --gx-orange-400: #FE971C;   /* logo orange */
  --gx-orange-500: #F2810E;   /* action (white-text safe) */
  --gx-orange-600: #D26B07;
  --gx-orange-700: #A85407;
  --gx-orange-800: #823F09;
  --gx-orange-900: #552906;

  /* ---- Blue ---- */
  --gx-blue-50:  #E5F5FC;
  --gx-blue-100: #BFE7F7;
  --gx-blue-200: #84CFF0;
  --gx-blue-300: #41B4E9;
  --gx-blue-400: #109BDD;
  --gx-blue-500: #018CD0;   /* brand blue */
  --gx-blue-600: #0271A6;
  --gx-blue-700: #045A82;
  --gx-blue-800: #084B6A;
  --gx-blue-900: #0A3E58;

  /* ---- Green ---- */
  --gx-green-50:  #EDF8EE;
  --gx-green-100: #CDEFD0;
  --gx-green-200: #A0E1A5;
  --gx-green-300: #6FCE76;
  --gx-green-400: #4FC157;
  --gx-green-500: #3DB444;   /* brand green */
  --gx-green-600: #2F9437;
  --gx-green-700: #26762D;
  --gx-green-800: #235E29;
  --gx-green-900: #1C4A21;

  /* ---- Red ---- */
  --gx-red-50:  #FDEDEE;
  --gx-red-100: #FACDD0;
  --gx-red-200: #F49BA1;
  --gx-red-300: #ED6771;
  --gx-red-400: #E13343;
  --gx-red-500: #D30A1C;   /* brand red */
  --gx-red-600: #B0071A;
  --gx-red-700: #8C0815;
  --gx-red-800: #6E0A13;
  --gx-red-900: #560A11;

  /* ---- Ink (dark surfaces) ---- */
  --gx-ink-500: #1A2F4D;
  --gx-ink-600: #102540;   /* raised surface on dark */
  --gx-ink-700: #0E2138;
  --gx-ink-800: #0C1B30;   /* primary dark surface */
  --gx-ink-900: #0A1422;   /* deepest background */
  --gx-ink-950: #08101C;

  /* ---- Gray (light UI + text) ---- */
  --gx-gray-50:  #FAFBFC;
  --gx-gray-100: #F4F6F9;
  --gx-gray-200: #EBEFF3;  /* borders */
  --gx-gray-300: #DCE3EB;
  --gx-gray-400: #B6C1CF;
  --gx-gray-500: #8294AA;  /* muted text */
  --gx-gray-600: #54657C;  /* body text */
  --gx-gray-700: #36475E;
  --gx-gray-800: #1E2D40;
  --gx-gray-900: #0C1B30;  /* headings */

  /* ---- Standalone hues ---- */
  --gx-gold:  #FFC53D;
  --gx-cream: #FAF6EE;
  --gx-white: #FFFFFF;

  /* ============ SEMANTIC STATUS ============ */
  --gx-danger:  var(--gx-red-500);
  --gx-warning: var(--gx-orange-400);
  --gx-success: var(--gx-green-500);
  --gx-info:    var(--gx-blue-500);

  /* ============ SEMANTIC ALIASES (use these in product code) ============ */
  --gx-brand:            var(--gx-orange-500);
  --gx-brand-hover:      var(--gx-orange-600);
  --gx-brand-contrast:   var(--gx-white);
  --gx-bankable:         var(--gx-green-500);
  --gx-surface-base:     var(--gx-ink-900);
  --gx-surface-raised:   var(--gx-ink-600);
  --gx-surface-app:      var(--gx-gray-50);
  --gx-surface-card:     var(--gx-white);
  --gx-border-subtle:    var(--gx-gray-200);
  --gx-border-dark:      rgba(255, 255, 255, 0.10);
  --gx-text-heading:     var(--gx-gray-900);
  --gx-text-body:        var(--gx-gray-600);
  --gx-text-muted:       var(--gx-gray-500);
  --gx-text-on-dark:     #EEF3FA;
  --gx-text-on-dark-muted: #9FB2C9;

  /* ============ MODULE ACCENTS ============ */
  --gx-module-finance:  var(--gx-orange-500);  /* Finance & Invoicing */
  --gx-module-people:   var(--gx-blue-500);    /* HR & People */
  --gx-module-projects: var(--gx-green-500);   /* Project Management */
  --gx-module-assets:   var(--gx-red-500);     /* Asset Management */

  /* ============ TYPOGRAPHY ============ */
  --gx-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --gx-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --gx-weight-regular:   400;
  --gx-weight-medium:    500;
  --gx-weight-semibold:  600;
  --gx-weight-bold:      700;
  --gx-weight-extrabold: 800;

  --gx-text-micro:      11px;
  --gx-text-caption:    13px;
  --gx-text-body-sm:    15px;
  --gx-text-base:       17px;
  --gx-text-body-lg:    19px;
  --gx-text-h3:         20px;
  --gx-text-h2:         44px;
  --gx-text-display-lg: 46px;
  --gx-text-display-xl: 62px;

  --gx-leading-tight:   1.08;
  --gx-leading-snug:    1.3;
  --gx-leading-normal:  1.6;
  --gx-leading-relaxed: 1.65;

  --gx-tracking-tight:  -0.03em;
  --gx-tracking-snug:   -0.02em;
  --gx-tracking-normal: 0;
  --gx-tracking-wide:   0.04em;
  --gx-tracking-wider:  0.1em;

  /* ============ SPACING (4px base) ============ */
  --gx-space-0:  0;
  --gx-space-1:  4px;
  --gx-space-2:  8px;
  --gx-space-3:  12px;
  --gx-space-4:  16px;
  --gx-space-5:  20px;
  --gx-space-6:  24px;
  --gx-space-8:  32px;
  --gx-space-10: 40px;
  --gx-space-14: 56px;
  --gx-space-16: 64px;
  --gx-space-20: 80px;
  --gx-space-26: 104px;

  /* ============ RADIUS ============ */
  --gx-radius-sm:   8px;
  --gx-radius-md:   11px;
  --gx-radius-lg:   14px;
  --gx-radius-xl:   18px;
  --gx-radius-2xl:  22px;
  --gx-radius-pill: 100px;

  /* ============ SHADOWS ============ */
  --gx-shadow-sm: 0 1px 2px rgba(12,27,48,0.06), 0 1px 3px rgba(12,27,48,0.10);
  --gx-shadow-md: 0 8px 22px -8px rgba(12,27,48,0.18);
  --gx-shadow-lg: 0 24px 50px -18px rgba(12,27,48,0.40);
  --gx-shadow-xl: 0 40px 90px -30px rgba(0,0,0,0.55);
  --gx-glow-brand:    0 14px 34px -10px rgba(242,129,14,0.75);
  --gx-glow-bankable: 0 14px 34px -10px rgba(61,180,68,0.50);

  /* ============ LAYOUT ============ */
  --gx-container-max: 1240px;
  --gx-gutter: 40px;

  /* ============ MOTION ============ */
  --gx-duration-fast:   200ms;
  --gx-duration-base:   300ms;
  --gx-duration-slow:   700ms;
  --gx-duration-reveal: 1600ms;
  --gx-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --gx-ease-in-out:   ease-in-out;

  /* ============ THEME-AWARE SURFACE & TEXT ============ */
  /* These flip with a [data-theme] attribute (default = light).
     Use them for any surface/text that must adapt to dark mode;
     the fixed scales above stay constant across themes. */
  --gx-bg:             #F4F6F9;   /* page background */
  --gx-bg-elevated:    #FAFBFC;   /* subtle raised fill */
  --gx-card:           #FFFFFF;   /* cards, panels */
  --gx-border:         #EBEFF3;   /* dividers, card borders */
  --gx-text:           #0C1B30;   /* primary text / headings */
  --gx-text-secondary: #54657C;   /* body text */
  --gx-text-tertiary:  #8294AA;   /* muted / captions */
}

/* ============ DARK MODE ============ */
/* Apply on <html> or any container:  <html data-theme="dark"> */
[data-theme="dark"] {
  --gx-bg:             #0A1422;
  --gx-bg-elevated:    #0E2138;
  --gx-card:           #102540;
  --gx-border:         rgba(255, 255, 255, 0.10);
  --gx-text:           #EEF3FA;
  --gx-text-secondary: #9FB2C9;
  --gx-text-tertiary:  #6F8298;

  /* surfaces that were dark-only in light mode invert sensibly */
  --gx-surface-app:    #0A1422;
  --gx-surface-card:   #102540;
  --gx-border-subtle:  rgba(255, 255, 255, 0.10);
  --gx-text-heading:   #EEF3FA;
  --gx-text-body:      #9FB2C9;
  --gx-text-muted:     #6F8298;

  /* shadows read softer on dark surfaces */
  --gx-shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
  --gx-shadow-md: 0 8px 22px -8px rgba(0,0,0,0.55);
  --gx-shadow-lg: 0 24px 50px -18px rgba(0,0,0,0.70);
}

/* Respect OS preference automatically when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gx-bg:             #0A1422;
    --gx-bg-elevated:    #0E2138;
    --gx-card:           #102540;
    --gx-border:         rgba(255, 255, 255, 0.10);
    --gx-text:           #EEF3FA;
    --gx-text-secondary: #9FB2C9;
    --gx-text-tertiary:  #6F8298;
  }
}