/* ═══════════════════════════════════════════════════════════════════
   TecOnca Data Solutions — Design Tokens
   ═══════════════════════════════════════════════════════════════════
   Single source of truth for the brand's visual identity.
   All colour values are derived from the official logo.

   USAGE
   ─────
   1. This file is imported FIRST in index.html (<link>).
   2. styles.css and any future CSS consume these tokens via var().
   3. To update the palette, edit ONLY this file.

   FILE STRUCTURE
   ─────
   1. Brand Colours (core palette from logo)
   2. Semantic Colours (roles: text, background, border, etc.)
   3. Typography
   4. Spacing
   5. Elevation (shadows)
   6. Shape (border-radius)
   7. Motion (transitions & animation)
   8. Breakpoints (reference — used in media queries)
   9. Z-Index Scale
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. Brand Colours ──────────────────────────────────────────────
     Extracted from: assets/logo.png
     ─ Gold/Bronze:  contour, circuits, icons
     ─ Steel Blue:   inner cloud, charts
     ─ Charcoal:     background
     ─ White/Silver: jaguar, text contrast
  ────────────────────────────────────────────────────────────────── */

  /* Primary — dark foundation */
  --color-primary:         #1A1F2E;
  --color-primary-light:   #252A3A;
  --color-primary-dark:    #12151F;

  /* Secondary — gold / bronze (most distinctive element of the logo) */
  --color-secondary:       #C9A84C;
  --color-secondary-light: #D4B85A;
  --color-secondary-dark:  #B89530;

  /* Accent — steel blue / teal (cloud & data visualisation) */
  --color-accent:          #4A8DAA;
  --color-accent-light:    #5DA3BF;
  --color-accent-dark:     #3A7590;

  /* Neutrals */
  --color-white:           #FFFFFF;
  --color-gray-50:         #F4F5F8;
  --color-gray-100:        #E4E8EC;
  --color-gray-200:        #CBD2DA;
  --color-gray-300:        #A0AEC0;
  --color-gray-400:        #718096;
  --color-gray-500:        #4A5568;
  --color-gray-900:        #1A202C;

  /* Status (for future use — forms, toasts, etc.) */
  --color-success:         #38A169;
  --color-warning:         #D69E2E;
  --color-error:           #E53E3E;
  --color-info:            var(--color-accent);

  /* ── 2. Semantic Colours ───────────────────────────────────────── */

  /* Text */
  --text:                  #2D3748;
  --text-light:            var(--color-gray-400);
  --text-on-dark:          var(--color-gray-100);
  --text-heading:          var(--color-primary);
  --text-link:             var(--color-secondary);

  /* Backgrounds */
  --bg:                    var(--color-white);
  --bg-alt:                var(--color-gray-50);
  --bg-dark:               var(--color-primary);

  /* Borders */
  --border:                var(--color-gray-100);
  --border-light:          var(--color-gray-50);

  /* Component-specific */
  --header-bg:             rgba(26, 31, 46, 0.95);
  --header-shadow:         0 2px 20px rgba(0, 0, 0, 0.3);
  --hero-gradient:         linear-gradient(135deg,
                              var(--color-primary) 0%,
                              var(--color-primary-light) 50%,
                              #2A3550 100%);

  /* Interactive */
  --focus-ring:            0 0 0 3px rgba(201, 168, 76, 0.4);

  /* ── 3. Typography ─────────────────────────────────────────────── */
  --font-family:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs:          0.75rem;   /* 12px */
  --font-size-sm:          0.875rem;  /* 14px */
  --font-size-base:        1rem;      /* 16px */
  --font-size-md:          1.05rem;   /* ~17px */
  --font-size-lg:          1.15rem;   /* ~18px */
  --font-size-xl:          1.4rem;    /* ~22px */
  --font-size-2xl:         2.2rem;    /* ~35px */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:     1.15;
  --line-height-normal:    1.7;
  --line-height-relaxed:   1.8;

  /* ── 4. Spacing Scale ──────────────────────────────────────────── */
  --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;
  --space-20:  80px;
  --space-24:  100px;

  /* ── 5. Elevation (Shadows) ────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow:     0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 10px 20px -5px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 20px 40px -12px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ── 6. Shape ──────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── 7. Motion ─────────────────────────────────────────────────── */
  --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 8. Layout ─────────────────────────────────────────────────── */
  --max-width:  1200px;

  /* ── 9. Z-Index Scale ──────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-header:   1000;
  --z-overlay:  1500;
  --z-modal:    2000;
  --z-toast:    2500;

  /* ──────────────────────────────────────────────────────────────
     Breakpoints (reference only — CSS custom properties can't be
     used inside @media queries, so these serve as documentation):
       mobile:   480px
       tablet:   768px
       desktop:  1024px
       wide:     1280px
  ────────────────────────────────────────────────────────────── */

  /* ── Legacy aliases (backward-compat while migrating) ─────────── */
  --primary:          var(--color-primary);
  --primary-light:    var(--color-primary-light);
  --secondary:        var(--color-secondary);
  --secondary-light:  var(--color-secondary-light);
  --accent:           var(--color-accent);
  --accent-light:     var(--color-accent-light);
  --font:             var(--font-family);
}