/*
 * AirGarage Design System — Colors + Type tokens
 * Derived from shared-ui/lib/styles/ (airgarage/ag) and the
 * AirGarage Interfaces UI Kit V1 Figma file.
 *
 * Uses the `--ag-*` prefix matching the production codebase so tokens
 * drop into real code without renaming.
 */

/* ── FONTS ──────────────────────────────────────────────────────── */
/* Primary: Outfit. Self-hosted from /fonts/ (matches production). */
@font-face { font-family: 'Outfit'; font-weight: 100; font-style: normal; font-display: swap; src: url('./fonts/Outfit-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 200; font-style: normal; font-display: swap; src: url('./fonts/Outfit-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 300; font-style: normal; font-display: swap; src: url('./fonts/Outfit-Light.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/Outfit-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-style: normal; font-display: swap; src: url('./fonts/Outfit-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-style: normal; font-display: swap; src: url('./fonts/Outfit-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-style: normal; font-display: swap; src: url('./fonts/Outfit-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-style: normal; font-display: swap; src: url('./fonts/Outfit-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 900; font-style: normal; font-display: swap; src: url('./fonts/Outfit-Black.ttf') format('truetype'); }

:root {
    /* ══════════════════════════════════════════════════════════════
     * COLOR SCALES — 27 families × 12 steps
     * Derived from Figma "Tokens" export (Light mode).
     * Step semantics:
     *   1–2  = app backgrounds          (1 = subtle, 2 = surface)
     *   3    = interactive default bg   (hover target)
     *   4    = interactive hover bg
     *   5    = interactive selected bg
     *   6    = border, not interactive
     *   7    = border, interactive
     *   8    = border, focus
     *   9    = solid default            (fills, brand)
     *   10   = solid hover
     *   11   = text low-contrast        (accessible on 1–6)
     *   12   = text high-contrast       (headings)
     * ═════════════════════════════════════════════════════════════ */

    /* ── Orange — BRAND ACCENT (step 9 = #ff6712) ─────────── */
    --ag-orange-1: #fefcfb; --ag-orange-2: #fff5f0; --ag-orange-3: #ffe9dd; --ag-orange-4: #ffd7c2; --ag-orange-5: #ffc9af; --ag-orange-6: #ffb998; --ag-orange-7: #ffa581; --ag-orange-8: #f58d61; --ag-orange-9: #ff6712; --ag-orange-10: #f35900; --ag-orange-11: #d74600; --ag-orange-12: #592c19;

    /* ── Sand — NEUTRAL (warm grey) ───────────────────────── */
    --ag-sand-1: #fdfdfc; --ag-sand-2: #f9f9f8; --ag-sand-3: #f1f0ef; --ag-sand-4: #e9e8e6; --ag-sand-5: #e2e1de; --ag-sand-6: #dad9d6; --ag-sand-7: #cfceca; --ag-sand-8: #bcbbb5; --ag-sand-9: #8d8d86; --ag-sand-10: #82827c; --ag-sand-11: #63635e; --ag-sand-12: #21201c;

    /* ── Semantic core families (success / error / warn / info) ── */
    --ag-green-1: #fbfefc; --ag-green-2: #f4fbf6; --ag-green-3: #e6f6eb; --ag-green-4: #d6f1df; --ag-green-5: #c4e8d1; --ag-green-6: #adddc0; --ag-green-7: #8eceaa; --ag-green-8: #5bb98b; --ag-green-9: #30a46c; --ag-green-10: #2b9a66; --ag-green-11: #218358; --ag-green-12: #193b2d;
    --ag-red-1: #fffcfc; --ag-red-2: #fff7f7; --ag-red-3: #feebec; --ag-red-4: #ffdbdc; --ag-red-5: #ffcdce; --ag-red-6: #fdbdbe; --ag-red-7: #f4a9aa; --ag-red-8: #eb8e90; --ag-red-9: #e5484d; --ag-red-10: #dc3e42; --ag-red-11: #ce2c31; --ag-red-12: #641723;
    --ag-amber-1: #fefdfb; --ag-amber-2: #fefbe9; --ag-amber-3: #fff7c2; --ag-amber-4: #ffee9c; --ag-amber-5: #fbe577; --ag-amber-6: #f3d673; --ag-amber-7: #e9c162; --ag-amber-8: #e2a336; --ag-amber-9: #ffc53d; --ag-amber-10: #ffba18; --ag-amber-11: #ab6400; --ag-amber-12: #4f3422;
    --ag-blue-1: #fbfdff; --ag-blue-2: #f4faff; --ag-blue-3: #e6f4fe; --ag-blue-4: #d5efff; --ag-blue-5: #c2e5ff; --ag-blue-6: #acd8fc; --ag-blue-7: #8ec8f6; --ag-blue-8: #5eb1ef; --ag-blue-9: #0090ff; --ag-blue-10: #0588f0; --ag-blue-11: #0d74ce; --ag-blue-12: #113264;

    /* ── Additional families (graphs / categorical tags / badges) ── */
    --ag-gray-1: #fcfcfc; --ag-gray-2: #f9f9f9; --ag-gray-3: #f0f0f0; --ag-gray-4: #e8e8e8; --ag-gray-5: #e0e0e0; --ag-gray-6: #d9d9d9; --ag-gray-7: #cecece; --ag-gray-8: #bbbbbb; --ag-gray-9: #8d8d8d; --ag-gray-10: #838383; --ag-gray-11: #646464; --ag-gray-12: #202020;
    --ag-gold-1: #fdfdfc; --ag-gold-2: #faf9f2; --ag-gold-3: #f2f0e7; --ag-gold-4: #eae6db; --ag-gold-5: #e1dccf; --ag-gold-6: #d8d0bf; --ag-gold-7: #cbc0aa; --ag-gold-8: #b9a88d; --ag-gold-9: #978365; --ag-gold-10: #8c7a5e; --ag-gold-11: #71624b; --ag-gold-12: #3b352b;
    --ag-bronze-1: #fdfcfc; --ag-bronze-2: #fdf7f5; --ag-bronze-3: #f6edea; --ag-bronze-4: #efe4df; --ag-bronze-5: #e7d9d3; --ag-bronze-6: #dfcdc5; --ag-bronze-7: #d3bcb3; --ag-bronze-8: #c2a499; --ag-bronze-9: #a18072; --ag-bronze-10: #957468; --ag-bronze-11: #7d5e54; --ag-bronze-12: #43302b;
    --ag-brown-1: #fefdfc; --ag-brown-2: #fbf9f2; --ag-brown-3: #f6f0e2; --ag-brown-4: #f1e6ca; --ag-brown-5: #ecdbb5; --ag-brown-6: #e3cfa3; --ag-brown-7: #d7bf8b; --ag-brown-8: #c7a963; --ag-brown-9: #ab8a31; --ag-brown-10: #9f7d22; --ag-brown-11: #86680d; --ag-brown-12: #3e3623;
    --ag-yellow-1: #fdfdf9; --ag-yellow-2: #fefce9; --ag-yellow-3: #fffab8; --ag-yellow-4: #fff394; --ag-yellow-5: #ffe770; --ag-yellow-6: #f3d768; --ag-yellow-7: #e4c767; --ag-yellow-8: #d5ae39; --ag-yellow-9: #ffe629; --ag-yellow-10: #ffdc00; --ag-yellow-11: #9e6c00; --ag-yellow-12: #473b1f;
    --ag-tomato-1: #fffcfc; --ag-tomato-2: #fff8f7; --ag-tomato-3: #feebe7; --ag-tomato-4: #ffdcd3; --ag-tomato-5: #ffcdc2; --ag-tomato-6: #fdbdaf; --ag-tomato-7: #f5a898; --ag-tomato-8: #ec8e7b; --ag-tomato-9: #e54d2e; --ag-tomato-10: #dd4425; --ag-tomato-11: #d13415; --ag-tomato-12: #5c271f;
    --ag-ruby-1: #fffcfd; --ag-ruby-2: #fff7f9; --ag-ruby-3: #feeff3; --ag-ruby-4: #ffdce1; --ag-ruby-5: #ffced6; --ag-ruby-6: #f8bfc8; --ag-ruby-7: #efacb8; --ag-ruby-8: #e592a3; --ag-ruby-9: #e54666; --ag-ruby-10: #dc3b5d; --ag-ruby-11: #ca244d; --ag-ruby-12: #64172b;
    --ag-crimson-1: #fffcfd; --ag-crimson-2: #fff7fa; --ag-crimson-3: #ffe9f2; --ag-crimson-4: #ffdcea; --ag-crimson-5: #facde0; --ag-crimson-6: #f5bed4; --ag-crimson-7: #edaac7; --ag-crimson-8: #e491b6; --ag-crimson-9: #bd0c78; --ag-crimson-10: #ac006a; --ag-crimson-11: #c71f80; --ag-crimson-12: #680d41;
    --ag-pink-1: #fffcfe; --ag-pink-2: #fef7fb; --ag-pink-3: #fee9f5; --ag-pink-4: #fbdcef; --ag-pink-5: #f6cee7; --ag-pink-6: #efbfdd; --ag-pink-7: #e7acd0; --ag-pink-8: #dd93c2; --ag-pink-9: #d6409f; --ag-pink-10: #cf3897; --ag-pink-11: #c2298a; --ag-pink-12: #651249;
    --ag-plum-1: #fefcff; --ag-plum-2: #fdf7fd; --ag-plum-3: #fbebfb; --ag-plum-4: #f7def8; --ag-plum-5: #f2d1f3; --ag-plum-6: #e9c2ec; --ag-plum-7: #deade3; --ag-plum-8: #cf91d8; --ag-plum-9: #ab4aba; --ag-plum-10: #a144af; --ag-plum-11: #953ea3; --ag-plum-12: #53195d;
    --ag-purple-1: #fefcfe; --ag-purple-2: #fbf7fe; --ag-purple-3: #f7edfe; --ag-purple-4: #f2e2fc; --ag-purple-5: #ead5f9; --ag-purple-6: #e0c4f4; --ag-purple-7: #d1afec; --ag-purple-8: #be93e4; --ag-purple-9: #8e4ec6; --ag-purple-10: #8347b9; --ag-purple-11: #8145b5; --ag-purple-12: #402060;
    --ag-violet-1: #fdfdff; --ag-violet-2: #f8f9ff; --ag-violet-3: #f1f1ff; --ag-violet-4: #e6e7ff; --ag-violet-5: #dadbff; --ag-violet-6: #cbcdff; --ag-violet-7: #b8b9fb; --ag-violet-8: #9d9df2; --ag-violet-9: #4b35b6; --ag-violet-10: #3e21a2; --ag-violet-11: #5d51c6; --ag-violet-12: #2c2763;
    --ag-iris-1: #fdfdff; --ag-iris-2: #f8f8ff; --ag-iris-3: #f0f1fe; --ag-iris-4: #e6e7ff; --ag-iris-5: #dadcff; --ag-iris-6: #cbcdff; --ag-iris-7: #b8baf8; --ag-iris-8: #9b9ef0; --ag-iris-9: #5b5bd6; --ag-iris-10: #5151cd; --ag-iris-11: #5753c6; --ag-iris-12: #272962;
    --ag-indigo-1: #fbfdff; --ag-indigo-2: #f4faff; --ag-indigo-3: #e3f5ff; --ag-indigo-4: #d2eeff; --ag-indigo-5: #bee5fe; --ag-indigo-6: #a8d9f7; --ag-indigo-7: #8ac9ef; --ag-indigo-8: #59b2e5; --ag-indigo-9: #009ad8; --ag-indigo-10: #008dc7; --ag-indigo-11: #007ab6; --ag-indigo-12: #0b3a51;
    --ag-cyan-1: #fafdfe; --ag-cyan-2: #f2fafb; --ag-cyan-3: #def7f9; --ag-cyan-4: #caf1f6; --ag-cyan-5: #b5e9f0; --ag-cyan-6: #9ddde7; --ag-cyan-7: #7dcedc; --ag-cyan-8: #3db9cf; --ag-cyan-9: #00a2c7; --ag-cyan-10: #0797b9; --ag-cyan-11: #107d98; --ag-cyan-12: #0d3c48;
    --ag-teal-1: #fafefd; --ag-teal-2: #f4fbf9; --ag-teal-3: #e1f8f3; --ag-teal-4: #cef2ec; --ag-teal-5: #baeae2; --ag-teal-6: #a4ded3; --ag-teal-7: #88cdc2; --ag-teal-8: #59b8ab; --ag-teal-9: #0a9183; --ag-teal-10: #008677; --ag-teal-11: #007f71; --ag-teal-12: #133d37;
    --ag-jade-1: #fbfefd; --ag-jade-2: #f4fbf7; --ag-jade-3: #e6f7ed; --ag-jade-4: #d6f1e3; --ag-jade-5: #c3e9d7; --ag-jade-6: #acdec8; --ag-jade-7: #8bceb6; --ag-jade-8: #56ba9f; --ag-jade-9: #29a383; --ag-jade-10: #26997b; --ag-jade-11: #208368; --ag-jade-12: #1d3b31;
    --ag-grass-1: #fbfefb; --ag-grass-2: #f5fbf5; --ag-grass-3: #e9f6e9; --ag-grass-4: #daf1db; --ag-grass-5: #c9e8ca; --ag-grass-6: #b2ddb5; --ag-grass-7: #94ce9a; --ag-grass-8: #65ba74; --ag-grass-9: #46a758; --ag-grass-10: #3e9b4f; --ag-grass-11: #2a7e3b; --ag-grass-12: #203c25;
    --ag-lime-1: #fcfef7; --ag-lime-2: #f6fcef; --ag-lime-3: #e5fcc0; --ag-lime-4: #d5f896; --ag-lime-5: #c5ef71; --ag-lime-6: #b6e161; --ag-lime-7: #a5ce4d; --ag-lime-8: #8fb732; --ag-lime-9: #425a00; --ag-lime-10: #334a00; --ag-lime-11: #5b7e00; --ag-lime-12: #2e4500;
    --ag-mint-1: #f9fefd; --ag-mint-2: #f2fbf9; --ag-mint-3: #ddf9f2; --ag-mint-4: #c8f4e9; --ag-mint-5: #b3ecde; --ag-mint-6: #9ce0d0; --ag-mint-7: #7ecfbd; --ag-mint-8: #4cbba5; --ag-mint-9: #86ead4; --ag-mint-10: #7de0cb; --ag-mint-11: #027864; --ag-mint-12: #16433c;
    --ag-sky-1: #f9feff; --ag-sky-2: #f1fafd; --ag-sky-3: #e1f6fd; --ag-sky-4: #d1f0fa; --ag-sky-5: #bee7f5; --ag-sky-6: #a9daed; --ag-sky-7: #8dcae3; --ag-sky-8: #60b3d7; --ag-sky-9: #7ce2fe; --ag-sky-10: #74daf8; --ag-sky-11: #00749e; --ag-sky-12: #1d3e56;

    /* Deprecated alias kept for badges preview — prefer --ag-gold-* or --ag-brown-* */
    --ag-olive-3: var(--ag-gold-3); --ag-olive-9: var(--ag-gold-9); --ag-olive-11: var(--ag-gold-11); --ag-olive-12: var(--ag-gold-12);

    /* ── Lexical aliases (recommended in product code) ─────── */
    --ag-accent-background-1: var(--ag-orange-1);
    --ag-accent-background-2: var(--ag-orange-2);
    --ag-accent-interactive-default: var(--ag-orange-3);
    --ag-accent-interactive-hover:   var(--ag-orange-4);
    --ag-accent-interactive-selected:var(--ag-orange-5);
    --ag-accent-border-not-interactive: var(--ag-orange-6);
    --ag-accent-border-interactive: var(--ag-orange-7);
    --ag-accent-border-focus:       var(--ag-orange-8);
    --ag-accent-solid-default:      var(--ag-orange-9);
    --ag-accent-solid-hover:        var(--ag-orange-10);
    --ag-accent-text:               var(--ag-orange-11);
    --ag-accent-text-high-contrast: var(--ag-orange-12);

    --ag-neutral-background-1: var(--ag-sand-1);
    --ag-neutral-background-2: var(--ag-sand-2);
    --ag-neutral-interactive-default: var(--ag-sand-3);
    --ag-neutral-interactive-hover:   var(--ag-sand-4);
    --ag-neutral-interactive-selected:var(--ag-sand-5);
    --ag-neutral-border-not-interactive: var(--ag-sand-6);
    --ag-neutral-border-interactive: var(--ag-sand-7);
    --ag-neutral-border-focus:       var(--ag-sand-8);
    --ag-neutral-solid-default:      var(--ag-sand-9);
    --ag-neutral-solid-hover:        var(--ag-sand-10);
    --ag-neutral-text:               var(--ag-sand-11);
    --ag-neutral-text-high-contrast: var(--ag-sand-12);

    --ag-success-solid-default: var(--ag-green-9);
    --ag-success-text:          var(--ag-green-11);
    --ag-error-solid-default:   var(--ag-red-9);
    --ag-error-text:            var(--ag-red-11);
    --ag-warning-solid-default: var(--ag-amber-9);
    --ag-warning-text:          var(--ag-amber-11);
    --ag-info-solid-default:    var(--ag-blue-9);
    --ag-info-text:             var(--ag-blue-11);

    --ag-white: #ffffff;
    --ag-black: #000000;

    /* ── Typography ─────────────────────────────────────────── */
    --ag-font-family-primary: 'Outfit', 'Helvetica Neue', Arial, Helvetica, sans-serif;

    --ag-font-weight-regular:  400;
    --ag-font-weight-medium:   500;
    --ag-font-weight-semibold: 600;
    --ag-font-weight-bold:     700;

    --ag-font-size-1: 12px;
    --ag-font-size-2: 14px;
    --ag-font-size-3: 16px;
    --ag-font-size-4: 18px;
    --ag-font-size-5: 20px;
    --ag-font-size-6: 24px;
    --ag-font-size-7: 28px;
    --ag-font-size-8: 36px;
    --ag-font-size-9: 60px;

    --ag-line-height-1: 16px;
    --ag-line-height-2: 20px;
    --ag-line-height-3: 24px;
    --ag-line-height-4: 26px;
    --ag-line-height-5: 28px;
    --ag-line-height-6: 30px;
    --ag-line-height-7: 36px;
    --ag-line-height-8: 40px;
    --ag-line-height-9: 60px;

    /* ── Spacing ────────────────────────────────────────────── */
    --ag-spacing-0: 0px;
    --ag-spacing-1: 4px;
    --ag-spacing-2: 8px;
    --ag-spacing-3: 12px;
    --ag-spacing-4: 16px;
    --ag-spacing-5: 24px;
    --ag-spacing-6: 32px;
    --ag-spacing-7: 40px;
    --ag-spacing-8: 48px;
    --ag-spacing-9: 64px;

    /* ── Radius ─────────────────────────────────────────────── */
    --ag-radius-0: 0px;
    --ag-radius-1: 4px;
    --ag-radius-2: 8px;
    --ag-radius-3: 12px;
    --ag-radius-4: 16px;
    --ag-radius-5: 24px;
    --ag-radius-6: 32px;
    --ag-radius-7: 9999px;

    /* ── Shadows (derived from Figma frame effects) ────────── */
    --ag-shadow-sm: 0 1px 2px rgba(132,142,151,0.07);
    --ag-shadow-md: 0 2px 4px rgba(132,142,151,0.07), 0 1px 2px rgba(21,23,26,0.04);
    --ag-shadow-lg: 0 8px 24px rgba(21,23,26,0.08), 0 2px 4px rgba(132,142,151,0.07);
    --ag-shadow-xl: 0 20px 40px rgba(21,23,26,0.12);

    /* Semantic text aliases */
    --ag-fg-1: var(--ag-neutral-text-high-contrast); /* strongest */
    --ag-fg-2: var(--ag-neutral-text);               /* body/secondary */
    --ag-fg-3: var(--ag-sand-9);                     /* muted */
    --ag-fg-brand: var(--ag-accent-text);
    --ag-bg-1:  var(--ag-white);
    --ag-bg-2:  var(--ag-neutral-background-2);
    --ag-bg-3:  var(--ag-neutral-interactive-default);
}

/* ── Semantic base styles ──────────────────────────────────────── */
html, body {
    font-family: var(--ag-font-family-primary);
    color: var(--ag-fg-1);
    background: var(--ag-bg-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography variants mapped to standard elements */
.ag-display-xl { font-size: var(--ag-font-size-9); line-height: var(--ag-line-height-9); font-weight: 500; letter-spacing: -0.4px; }
.ag-display-lg { font-size: var(--ag-font-size-8); line-height: var(--ag-line-height-8); font-weight: 500; letter-spacing: -0.16px; }
.ag-display-md { font-size: var(--ag-font-size-7); line-height: var(--ag-line-height-7); font-weight: 500; letter-spacing: -0.12px; }
.ag-display-sm { font-size: var(--ag-font-size-6); line-height: var(--ag-line-height-6); font-weight: 500; letter-spacing: -0.1px; }

.ag-h1 { font-size: var(--ag-font-size-5); line-height: var(--ag-line-height-5); font-weight: 500; letter-spacing: -0.08px; }
.ag-h2 { font-size: var(--ag-font-size-4); line-height: var(--ag-line-height-4); font-weight: 500; letter-spacing: -0.04px; }
.ag-h3 { font-size: var(--ag-font-size-3); line-height: var(--ag-line-height-3); font-weight: 500; }

.ag-body-lg { font-size: var(--ag-font-size-4); line-height: var(--ag-line-height-4); font-weight: 400; }
.ag-body-md { font-size: var(--ag-font-size-3); line-height: var(--ag-line-height-3); font-weight: 400; }
.ag-body-sm { font-size: var(--ag-font-size-2); line-height: var(--ag-line-height-2); font-weight: 400; }

.ag-caption { font-size: var(--ag-font-size-1); line-height: var(--ag-line-height-1); font-weight: 400; letter-spacing: 0.04px; }
.ag-label   { font-size: var(--ag-font-size-1); line-height: var(--ag-line-height-1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; }