/* =========================================================================
   Swyfft Design System — Colors & Type
   Source: Swyfft.Web/Client/tailwind.config.js + webkit components
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
    /* ---------- BRAND GREEN (signature color — Swyfft lime/olive) ---------- */
    --brand-green-50:  #edf8d6;
    --brand-green-100: #dee8ca;
    --brand-green-150: #d0e0ab;
    --brand-green-200: #adcc66;
    --brand-green-250: #8fbf21;  /* primary action / button bg */
    --brand-green-300: #7ea81d;
    --brand-green-350: #638601;
    --brand-green-400: #4e6b0b;
    --brand-green-450: #385C00;  /* success text */
    --brand-green-500: #273803;
    --brand-green-550: #1B2A00;
    --brand-green-600: #0F1D00;

    /* ---------- BRAND GRAY (neutrals — full light/dark scale) ---------- */
    --brand-gray-100: #f9fafa;
    --brand-gray-150: #fafbfc;
    --brand-gray-200: #f2f4f5;
    --brand-gray-250: #eff0f4;
    --brand-gray-300: #e4e4e4;
    --brand-gray-350: #cccccc;
    --brand-gray-400: #c0c0c0;
    --brand-gray-450: #abaab2;
    --brand-gray-500: #b1b1b1;
    --brand-gray-550: #979899;
    --brand-gray-600: #555555;
    --brand-gray-650: #444444;
    --brand-gray-700: #333333;
    --brand-gray-750: #222222;
    --brand-gray-800: #1c1c1c;  /* dark surface */
    --brand-gray-850: #141414;
    --brand-gray-900: #0f0f0f;

    /* ---------- BRAND PURPLE (charcoal-purple accents, dark mode chrome) ---------- */
    --brand-purple-50:  #f2f3f9;
    --brand-purple-100: #e0dee7;
    --brand-purple-150: #eeedf2;
    --brand-purple-200: #d9d9e9;
    --brand-purple-250: #d1d2d9;
    --brand-purple-300: #c5c8d7;
    --brand-purple-350: #bac1df;
    --brand-purple-400: #a8b2e0;
    --brand-purple-450: #6e7491;
    --brand-purple-500: #686571;
    --brand-purple-550: #302c3c;
    --brand-purple-600: #1B1821;  /* deep charcoal-purple */
    --brand-purple-700: #2d2640;
    --brand-purple-800: #231d33;
    --brand-purple-900: #1a1626;

    /* ---------- BRAND BLUE (info / link) ---------- */
    --brand-blue-50:  #e9f1f9;
    --brand-blue-100: #d3e4f3;
    --brand-blue-150: #c8d9f0;
    --brand-blue-200: #d2e2ff;
    --brand-blue-250: #9cb3e0;
    --brand-blue-300: #8ca3d9;
    --brand-blue-350: #7a93d2;
    --brand-blue-400: #6a83cb;
    --brand-blue-450: #5a73c4;
    --brand-blue-500: #4a63bd;
    --brand-blue-550: #3a53b6;
    --brand-blue-600: #2a43af;
    --brand-blue-650: #1a33a8;
    --brand-blue-700: #0a23a1;

    /* ---------- BRAND RED (danger) ---------- */
    --brand-red-50:  #fff0f1;
    --brand-red-100: #ffd9dd;
    --brand-red-125: #ff8585;
    --brand-red-150: #f38d98;
    --brand-red-200: #f0717f;
    --brand-red-250: #ee6875;
    --brand-red-300: #e45663;
    --brand-red-400: #cc3a48;
    --brand-red-500: #b00020;
    --brand-red-600: #99001a;
    --brand-red-700: #7f0015;
    --brand-red-750: #660010;

    /* ---------- BRAND YELLOW (warning) ---------- */
    --brand-yellow-25:  #fffff6;
    --brand-yellow-50:  #fffde6;
    --brand-yellow-100: #fff8cc;
    --brand-yellow-150: #fff2a8;
    --brand-yellow-200: #ffe680;
    --brand-yellow-250: #ffdd5c;
    --brand-yellow-300: #ffd43b;
    --brand-yellow-350: #ffc91a;
    --brand-yellow-400: #f5bc00;
    --brand-yellow-450: #e0ab00;
    --brand-yellow-500: #c99700;

    /* ---------- SEMANTIC TOKENS — light mode ---------- */
    --bg:            var(--brand-gray-150);
    --bg-elevated:   #ffffff;
    --bg-subtle:     var(--brand-gray-200);
    --bg-muted:      var(--brand-gray-250);

    --fg-1:          var(--brand-gray-750);   /* primary text */
    --fg-2:          var(--brand-gray-600);   /* secondary text */
    --fg-3:          var(--brand-gray-550);   /* tertiary / placeholder */
    --fg-on-accent:  #ffffff;

    --border:        var(--brand-gray-300);
    --border-strong: var(--brand-gray-400);

    --accent:        var(--brand-green-250);  /* primary CTA */
    --accent-hover:  var(--brand-green-300);
    --accent-fg:     #ffffff;

    --success:       var(--brand-green-450);
    --success-bg:    var(--brand-green-100);
    --info:          var(--brand-blue-500);
    --info-bg:       var(--brand-blue-50);
    --warning:       var(--brand-yellow-500);
    --warning-bg:    var(--brand-yellow-100);
    --danger:        var(--brand-red-500);
    --danger-bg:     var(--brand-red-100);

    /* Shadows — Swyfft uses subtle elevation; cards stay flat-ish */
    /* Single shadow used everywhere shadows are needed */
    --shadow-xs: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-sm: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Radii — single 4px radius across the system; landing CTAs fully rounded */
    --radius-xs: 4px;
    --radius-sm: 4px;     /* default — buttons, inputs, tiles */
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 4px;
    --radius-full: 9999px; /* landing CTAs */

    /* Spacing scale (4px base, matches Tailwind defaults) */
    --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;

    /* ---------- TYPE — Lato is the primary; Roboto secondary ---------- */
    --font-sans:  'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-roboto: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Type scale — webkit uses Lato with tracking-wider on uppercase buttons */
    --text-xs:   12px;
    --text-sm:   14px;   /* button text */
    --text-base: 16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;
    --text-4xl:  36px;
    --text-5xl:  48px;
    --text-6xl:  60px;

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    --tracking-tight:  -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.025em;
    --tracking-wider:  0.05em;    /* button labels */
    --tracking-widest: 0.1em;     /* landing CTAs */
}

/* ---------- DARK MODE — class-based (matches Tailwind darkMode: 'selector') ---------- */
.dark, [data-theme='dark'] {
    --bg:            var(--brand-gray-850);
    --bg-elevated:   var(--brand-gray-800);
    --bg-subtle:     var(--brand-gray-800);
    --bg-muted:      var(--brand-gray-700);

    --fg-1:          var(--brand-gray-150);
    --fg-2:          var(--brand-gray-300);
    --fg-3:          var(--brand-gray-450);

    --border:        var(--brand-gray-650);
    --border-strong: var(--brand-gray-600);

    --success-bg:    var(--brand-green-550);
    --info-bg:       var(--brand-blue-700);
    --warning-bg:    var(--brand-yellow-500);
    --danger-bg:     var(--brand-red-700);
}

/* =========================================================================
   SEMANTIC TYPE — element-level defaults.
   Match Lato weights observed in code: 400 body, 700 bold, 900 black (landing CTAs).
   ========================================================================= */
html, body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--fg-1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, .h1 {
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 60px);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
}

h2, .h2 {
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: var(--leading-tight);
    color: var(--fg-1);
}

h3, .h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: var(--leading-snug);
    color: var(--fg-1);
}

h4, .h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: var(--leading-snug);
    color: var(--fg-1);
}

.eyebrow {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-green-350);
}

p, .p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--fg-1);
}

small, .small {
    font-size: var(--text-sm);
    color: var(--fg-2);
}

.caption {
    font-size: var(--text-xs);
    color: var(--fg-3);
    line-height: var(--leading-snug);
}

a {
    color: var(--brand-blue-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover { color: var(--brand-blue-700); }

code, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
}