/* ==========================================================================
   Takeoff.Guru — Global Design System Tokens
   --------------------------------------------------------------------------
   Single source of truth for the brand palette, typography, spacing, radius,
   shadows and reusable component tokens. Consume these variables (var(--tk-*))
   across the app instead of hardcoding colors or sizes in individual pages.

   Adding tokens here is purely additive: :root custom properties have no
   visual effect until a rule references them, so this file is safe to load
   globally without altering existing pages.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Brand palette (approved) — use these everywhere.
       ---------------------------------------------------------------------- */
    --tk-dark: #0d1a29;          /* Main / dark background            */
    --tk-dark-rgb: 13, 26, 41;   /* Main dark as RGB (for rgba())     */
    --tk-secondary: #d4a853;     /* Secondary accent / cancel buttons — richer gold */
    --tk-cancel: #d4a853;        /* Cancel buttons (alias)            */
    --tk-gold-text: #8a6520;     /* Readable gold on light surfaces   */
    --tk-gold-highlight: #f5ead6; /* Soft gold tint for chips/notes    */
    --tk-primary: #102040;       /* Primary action buttons (listings + app) */
    --tk-text-light: #d4dae0;    /* Light text (on dark surfaces)     */
    --tk-text-colored: #314d6b;  /* Colored text / links              */
    --tk-success: #406458;       /* Success messages                  */
    --tk-icon: #bf8f38;          /* Icons accent (gold feature icons) */
    --tk-icon-field: #3f4b5c;    /* Form field affordance icons       */
    --tk-sidebar-hover: #14325c;  /* Sidebar item hover background     */
    --tk-back-btn: #c8912e;       /* Shared Back button background     */
    --tk-form-label: #6a7386;     /* Form field labels                 */

    /* ----------------------------------------------------------------------
       Derived / supporting colors
       ---------------------------------------------------------------------- */
    --tk-primary-hover: #0B1730;              /* Primary button hover           */
    --tk-secondary-hover: #bf8f38;            /* Secondary/cancel button hover  */
    --tk-dark-deep: #091220;                  /* Deeper dark (page behind panel)*/
    --tk-dark-alt: #14273f;                   /* Lighter navy for dark gradients*/
    --tk-surface: #ffffff;                    /* Card / form surface            */
    --tk-surface-muted: #f6f8fa;              /* Muted field / section fill     */
    --tk-text: #1f2a3d;                       /* Default body text (on light)   */
    --tk-text-muted: #6b7280;                 /* Secondary/muted text           */
    --tk-border: #d7dbe3;                     /* Default border                 */
    --tk-border-strong: #c2c9d4;              /* Emphasized border              */
    --tk-danger: #dc3545;                     /* Validation / error             */
    --tk-focus-ring: rgba(16, 32, 64, 0.15);  /* Focus ring (primary @ 15%)     */

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */
    --tk-font-sans: "Outfit", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tk-font-heading: "Outfit", "Source Sans 3", system-ui, sans-serif;

    --tk-fs-xs: 0.8125rem;   /* 13px — helper / footer / validation */
    --tk-fs-sm: 0.875rem;    /* 14px — meta / secondary             */
    --tk-fs-base: 1rem;      /* 16px — body                         */
    --tk-fs-control: 1rem;   /* 16px — inputs / selects / dropdowns */
    --tk-fs-label: 0.9375rem;/* 15px — form labels                  */
    --tk-fs-btn: 0.9375rem;  /* 15px — buttons / primary actions    */
    --tk-fs-md: 1.0625rem;   /* 17px — lead text                    */
    --tk-fs-lg: 1.5rem;      /* 24px — card logo / section titles   */
    --tk-fs-xl: 2rem;        /* 32px — large titles                 */
    --tk-fs-2xl: 2.75rem;    /* 44px — brand hero heading           */

    /* Compact title steps used by typography.css utilities (additive) */
    --tk-fs-title: 1.25rem;       /* 20px — page titles                 */
    --tk-fs-section: 1.125rem;    /* 18px — section headings            */

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

    --tk-lh-tight: 1.15;
    --tk-lh-base: 1.5;
    --tk-lh-relaxed: 1.6;

    /* ----------------------------------------------------------------------
       Spacing scale
       ---------------------------------------------------------------------- */
    --tk-space-1: 4px;
    --tk-space-2: 8px;
    --tk-space-3: 12px;
    --tk-space-4: 16px;
    --tk-space-5: 24px;
    --tk-space-6: 32px;
    --tk-space-7: 48px;
    --tk-space-8: 56px;

    /* ----------------------------------------------------------------------
       Radius
       ---------------------------------------------------------------------- */
    --tk-radius-sm: 8px;
    --tk-radius: 10px;      /* default control radius */
    --tk-radius-lg: 18px;   /* cards                  */
    --tk-radius-xl: 24px;   /* large cards            */
    --tk-radius-pill: 999px;

    /* ----------------------------------------------------------------------
       Shadows (subtle, material-inspired)
       ---------------------------------------------------------------------- */
    --tk-shadow-sm: 0 1px 2px rgba(13, 26, 41, 0.06);
    --tk-shadow: 0 6px 18px rgba(13, 26, 41, 0.08);
    --tk-shadow-lg: 0 24px 60px rgba(3, 10, 24, 0.30);

    /* ----------------------------------------------------------------------
       Controls
       ---------------------------------------------------------------------- */
    --tk-control-height: 54px;
    --tk-btn-height: 56px;
    --tk-transition: 0.15s ease;
}

/* --------------------------------------------------------------------------
   Bootstrap 5 theme-color bridge
   Map Bootstrap's CSS variables to the brand palette so BS components
   (buttons, alerts, form focus) inherit the theme without per-page overrides.
   Skipped on .theme-v2 pages so those modules keep Bootstrap's stock palette, except
   their listing screens (.tk-module-listing), which share the app-wide list design.
   -------------------------------------------------------------------------- */
:root:not(:has(.theme-v2:not(.tk-module-listing))) {
    --bs-primary: var(--tk-primary);
    --bs-primary-rgb: 16, 32, 64;
    --bs-secondary: var(--tk-secondary);
    --bs-secondary-rgb: 212, 168, 83;
    --bs-success: var(--tk-success);
    --bs-success-rgb: 64, 100, 88;
    --bs-body-color: var(--tk-text);
    --bs-link-color: var(--tk-text-colored);
    --bs-link-color-rgb: 49, 77, 107;
    --bs-link-hover-color: var(--tk-primary);
}