/* ═══════════════════════════════════════════════════════════
   IRONTRACK — DESIGN TOKENS (ROOT CONFIGURATION)
   ─────────────────────────────────────────────────────────
   Single source of truth for the entire design system.
   Lives in the css/ folder at the project root and is served
   at /css/tokens.css. Every other stylesheet (style.css,
   auth.css) reads its colors, fonts, spacing, shadows and
   radii from here. Nothing below should be redefined elsewhere.

   Load order: tokens.css → style.css → auth.css (auth pages only)
═══════════════════════════════════════════════════════════ */

/* ── FONTS — self-hosted, zero external requests ─────────
   Files live in static/fonts/ — served by Flask directly.
   Absolute /static/fonts/ paths keep the @font-face working
   now that tokens.css lives in the root css/ folder.
──────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-400i.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-700i.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/static/fonts/roboto-condensed-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/static/fonts/roboto-condensed-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


:root {

    /* ═══════════════════════════════════════════════════════
       COLOR — DARK MODE (default)
    ═══════════════════════════════════════════════════════ */

    /* Accent (10%) */
    --lime:         #c8ff00;
    --lime-dim:     #a8d800;
    --lime-glow:    rgba(200,255,0,0.1);
    --lime-glow2:   rgba(200,255,0,0.2);

    /* Secondary accents — used sparingly for state/feedback */
    --emerald:      #00ff87;
    --red:          #ff3b3b;
    --amber:        #ffb020;
    --blue:         #4f8eff;

    /* Primary surfaces (70%) */
    --bg:           #040404;
    --bg1:          #080808;
    --bg2:          #0c0c0c;
    --card:         #101010;

    /* Secondary surfaces (20%) */
    --card2:        #141414;
    --card3:        #1a1a1a;
    --line:         #1e1e1e;
    --line2:        #282828;
    --line3:        #333;

    /* Text */
    --white:        #ffffff;   /* primary text   — 70% */
    --g1:           #e0e0e0;   /* primary-muted  — 70% */
    --g2:           #999;      /* secondary text — 20% */
    --g3:           #555;      /* tertiary text  — 20% */
    --g4:           #2a2a2a;

    /* Shadows — dark mode */
    --shadow-sm:    0 2px 12px rgba(0,0,0,0.5);
    --shadow-md:    0 6px 24px rgba(0,0,0,0.45);
    --shadow-lg:    0 12px 48px rgba(0,0,0,0.6);


    /* ═══════════════════════════════════════════════════════
       TYPOGRAPHY
    ═══════════════════════════════════════════════════════ */

    /* Font families
       --font-display : Roboto Condensed Bold — H1, hero, big numbers
       --font-ui      : Roboto — nav, labels, buttons, captions
       --font-body    : Roboto — paragraphs, descriptions
       --font-head    : legacy alias, kept so existing rules
                         that reference var(--font-head) for
                         large display text keep working        */
    --font-display: 'Roboto Condensed', sans-serif;
    --font-ui:      'Roboto', sans-serif;
    --font-body:    'Roboto', sans-serif;
    --font-head:    var(--font-display);

    /* Type scale */
    --text-h1:   2.5rem;     /* 40px — page titles            */
    --text-h2:   2rem;       /* 32px — section headings       */
    --text-h3:   1.5rem;     /* 24px — card / panel titles     */
    --text-h4:   1.25rem;    /* 20px — subheadings            */
    --text-h5:   1.0625rem;  /* 17px — lead / intro text       */
    --text-h6:   0.95rem;    /* 15px — small headings         */
    --text-body: 0.9375rem;  /* 15px — base body copy          */
    --text-md:   1rem;       /* 16px — medium body copy        */
    --text-sm:   0.8125rem;  /* 13px — secondary / meta text   */
    --text-xs:   0.75rem;    /* 12px — labels, captions        */

    /* Font weights */
    --fw-light:   300;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;
    --fw-black:   900;

    /* Line heights */
    --lh-tight:   1.1;
    --lh-snug:    1.3;
    --lh-normal:  1.65;
    --lh-relaxed: 1.8;

    /* Letter spacing */
    --ls-tight:  -0.01em;
    --ls-normal: 0;
    --ls-wide:   0.04em;
    --ls-wider:  0.1em;


    /* ═══════════════════════════════════════════════════════
       SPACING SCALE
    ═══════════════════════════════════════════════════════ */
    --space-1:  0.25rem;  /* 4px  */
    --space-2:  0.5rem;   /* 8px  */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-7:  1.75rem;  /* 28px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-14: 3.5rem;   /* 56px */
    --space-16: 4rem;     /* 64px */


    /* ═══════════════════════════════════════════════════════
       BORDER RADIUS
    ═══════════════════════════════════════════════════════ */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   18px;
    --r-xl:   24px;
    --r-full: 999px;


    /* ═══════════════════════════════════════════════════════
       MOTION
    ═══════════════════════════════════════════════════════ */
    --ease:         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-spring:  cubic-bezier(0.34,1.56,0.64,1);
    --t:            0.15s;
    --t-md:         0.25s;
    --t-lg:         0.45s;
}


/* ═══════════════════════════════════════════════════════════
   COLOR — LIGHT MODE OVERRIDES
═══════════════════════════════════════════════════════════ */
[data-theme="light"] {

    /* Accent — brighter olive-green for better contrast on light */
    --lime:         #5c8a00;
    --lime-dim:     #4d7300;
    --lime-glow:    rgba(92,138,0,0.1);
    --lime-glow2:   rgba(92,138,0,0.18);
    --emerald:      #00875a;
    --red:          #d93025;
    --amber:        #c97800;
    --blue:         #1a6fdb;

    /* Backgrounds — ash white (between white and grey) */
    --bg:           #f1f1f1;
    --bg1:          #e9e9e9;
    --bg2:          #e2e2e2;

    /* Cards — clean neutral white */
    --card:         #ffffff;
    --card2:        #f7f7f7;
    --card3:        #efefef;

    /* Borders — subtle grey */
    --line:         #e4e4e4;
    --line2:        #d8d8d8;
    --line3:        #c6c6c6;

    /* Text — deep charcoal, not pure black */
    --white:        #1a1a1a;
    --g1:           #2e2e2e;
    --g2:           #626262;
    --g3:           #979797;
    --g4:           #e0e0e0;

    /* Shadows — light mode */
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
}


/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM — element defaults + utility classes
   ─────────────────────────────────────────────────────────
   Existing components keep their own sizing for specific
   contexts (hero, cards, etc). These rules establish the
   baseline scale for raw HTML elements and provide reusable
   classes (.subheading, .label, .caption) for new markup.
═══════════════════════════════════════════════════════════ */

h1, .h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

h2, .h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

h3, .h3 {
    font-family: var(--font-ui);
    font-size: var(--text-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

h4, .h4 {
    font-family: var(--font-ui);
    font-size: var(--text-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

h5, .h5 {
    font-family: var(--font-ui);
    font-size: var(--text-h5);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}

h6, .h6 {
    font-family: var(--font-ui);
    font-size: var(--text-h6);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

/* Subheading — lead paragraph under a heading */
.subheading {
    font-family: var(--font-body);
    font-size: var(--text-h5);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--g2);
}

/* Body text */
body, p, .body-text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
}

/* Labels — form labels, small uppercase tags */
.label, label {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--g2);
}

/* Buttons */
button, .btn {
    font-family: var(--font-ui);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
}

/* Captions — small muted helper text */
.caption {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--g3);
}