/* ================================
   Make Good Years -  Design Tokens

   The foundation of the MGY visual system.
   Drop this file into any project to get the brand palette,
   typography, spacing, and dark mode -  as CSS custom properties.

   Override any token per-product:
     :root { --mgy-brand: #2E7D32; }
   ================================ */

:root {
    /* ---- Brand ---- */
    --mgy-brand: #FF7019;
    --mgy-brand-hover: #E56010;
    --mgy-brand-light: #FFF3EC;

    /* ---- Text ---- */
    --mgy-text-heading: #2A2220;
    --mgy-text-body: #3D3331;
    --mgy-text-light: #6B5E58;
    --mgy-text-muted: #8C7B72;
    --mgy-text-faint: #A8998F;

    /* ---- Backgrounds ---- */
    --mgy-bg-page: #FAF6F1;
    --mgy-bg-card: #FFFFFF;
    --mgy-bg-warm: #F3EDE6;
    --mgy-bg-warm-light: #FDFBF9;

    /* ---- Borders ---- */
    --mgy-border-light: #E8E0D6;
    --mgy-border-medium: #DDD4CC;
    --mgy-border-dark: #D4C8BC;

    /* ---- Accent ---- */
    --mgy-accent: #45B5C2;
    --mgy-accent-hover: #3A9DA8;
    --mgy-accent-light: #EBF7F8;

    /* ---- Status ---- */
    --mgy-success-bg: #E8F5E9;
    --mgy-success-text: #2E7D32;
    --mgy-error-bg: #FDEEEE;
    --mgy-error-text: #C75050;
    --mgy-warning-bg: #FFF8E1;
    --mgy-warning-text: #B8860B;
    --mgy-info-bg: #EBF7F8;
    --mgy-info-text: #2A8A96;
    --mgy-status-bg: #F0E8E0;
    --mgy-status-text: #8C7B72;

    /* ---- Quadrant / Priority (semantic) ---- */
    --mgy-q1: #C75050;
    --mgy-q1-bg: #FDEEEE;
    --mgy-q2: #FF7019;
    --mgy-q2-bg: #FFF3EC;
    --mgy-q3: #45B5C2;
    --mgy-q3-bg: #EBF7F8;
    --mgy-q4: #8C7B72;
    --mgy-q4-bg: #F3EDE6;

    /* ---- Typography ---- */
    --mgy-font-heading: 'Playfair Display', 'AN', 'Helvetica Neue', serif;
    --mgy-font-body: 'AN', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mgy-font-brand: 'Playfair Display', 'Playwrite DE Grund', serif;

    --mgy-text-base: 16px;
    --mgy-text-sm: 14px;
    --mgy-text-xs: 12px;
    --mgy-text-lg: 18px;
    --mgy-text-xl: 20px;
    --mgy-text-2xl: 22px;
    --mgy-text-3xl: 26px;
    --mgy-text-4xl: 36px;
    --mgy-text-5xl: 48px;

    --mgy-leading-tight: 1.25;
    --mgy-leading-normal: 1.7;
    --mgy-leading-relaxed: 1.8;

    --mgy-weight-ultralight: 100;
    --mgy-weight-light: 300;
    --mgy-weight-normal: 400;
    --mgy-weight-medium: 500;
    --mgy-weight-semibold: 600;
    --mgy-weight-bold: 700;

    /* ---- Spacing ---- */
    --mgy-space-xs: 4px;
    --mgy-space-sm: 8px;
    --mgy-space-md: 16px;
    --mgy-space-lg: 24px;
    --mgy-space-xl: 32px;
    --mgy-space-2xl: 48px;
    --mgy-space-3xl: 64px;
    --mgy-space-4xl: 80px;

    /* ---- Layout ---- */
    --mgy-width-narrow: 720px;
    --mgy-width-standard: 1080px;
    --mgy-width-wide: 1200px;
    --mgy-page-padding: 24px;

    /* ---- Radii ---- */
    --mgy-radius-sm: 3px;
    --mgy-radius-md: 6px;
    --mgy-radius-lg: 8px;
    --mgy-radius-xl: 10px;
    --mgy-radius-2xl: 12px;
    --mgy-radius-round: 20px;

    /* ---- Shadows ---- */
    --mgy-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --mgy-shadow-card-hover: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
    --mgy-shadow-dropdown: 0 4px 12px rgba(0,0,0,0.06);

    /* ---- Transitions ---- */
    --mgy-transition-fast: 0.1s;
    --mgy-transition-normal: 0.15s;
}

/* ---- Dark Mode ---- */
/*
 * Two selectors for dark mode:
 * 1. @media prefers-color-scheme: auto detection (skipped when data-theme="light")
 * 2. [data-theme="dark"]: manual toggle override
 */

/* Auto dark mode -  prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --mgy-brand: #FF8533;
        --mgy-brand-hover: #E56010;
        --mgy-brand-light: #2a2220;

        --mgy-accent: #5CC8D4;
        --mgy-accent-hover: #4AB8C4;
        --mgy-accent-light: #1a2e30;

        --mgy-text-heading: #F0F0F0;
        --mgy-text-body: #D0D0D0;
        --mgy-text-light: #B0B0B0;
        --mgy-text-muted: #999999;
        --mgy-text-faint: #666666;

        --mgy-bg-page: #1a1a1a;
        --mgy-bg-card: #242424;
        --mgy-bg-warm: #222222;
        --mgy-bg-warm-light: #1e1e1e;

        --mgy-border-light: #333333;
        --mgy-border-medium: #444444;
        --mgy-border-dark: #555555;

        --mgy-success-bg: #1B3A1F;
        --mgy-success-text: #66BB6A;
        --mgy-error-bg: #3A1F1F;
        --mgy-error-text: #E57373;
        --mgy-warning-bg: #3A351F;
        --mgy-warning-text: #FFD54F;
        --mgy-info-bg: #1a2e30;
        --mgy-info-text: #5CC8D4;
        --mgy-status-bg: #333333;
        --mgy-status-text: #999999;

        --mgy-q1: #E57373;
        --mgy-q1-bg: #3A1F1F;
        --mgy-q2: #FF8533;
        --mgy-q2-bg: #2a2220;
        --mgy-q3: #5CC8D4;
        --mgy-q3-bg: #1a2e30;
        --mgy-q4: #999999;
        --mgy-q4-bg: #2a2a2a;

        --mgy-shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
        --mgy-shadow-card-hover: 0 2px 8px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2);
        --mgy-shadow-dropdown: 0 4px 12px rgba(0,0,0,0.2);
    }
}

/* Manual dark mode -  data-theme="dark" */
[data-theme="dark"] {
    --mgy-brand: #FF8533;
    --mgy-brand-hover: #E56010;
    --mgy-brand-light: #2a2220;

    --mgy-accent: #5CC8D4;
    --mgy-accent-hover: #4AB8C4;
    --mgy-accent-light: #1a2e30;

    --mgy-text-heading: #F0F0F0;
    --mgy-text-body: #D0D0D0;
    --mgy-text-light: #B0B0B0;
    --mgy-text-muted: #999999;
    --mgy-text-faint: #666666;

    --mgy-bg-page: #1a1a1a;
    --mgy-bg-card: #242424;
    --mgy-bg-warm: #222222;
    --mgy-bg-warm-light: #1e1e1e;

    --mgy-border-light: #333333;
    --mgy-border-medium: #444444;
    --mgy-border-dark: #555555;

    --mgy-success-bg: #1B3A1F;
    --mgy-success-text: #66BB6A;
    --mgy-error-bg: #3A1F1F;
    --mgy-error-text: #E57373;
    --mgy-warning-bg: #3A351F;
    --mgy-warning-text: #FFD54F;
    --mgy-info-bg: #1a2e30;
    --mgy-info-text: #5CC8D4;
    --mgy-status-bg: #333333;
    --mgy-status-text: #999999;

    --mgy-q1: #E57373;
    --mgy-q1-bg: #3A1F1F;
    --mgy-q2: #FF8533;
    --mgy-q2-bg: #2a2220;
    --mgy-q3: #5CC8D4;
    --mgy-q3-bg: #1a2e30;
    --mgy-q4: #999999;
    --mgy-q4-bg: #2a2a2a;

    --mgy-shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
    --mgy-shadow-card-hover: 0 2px 8px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2);
    --mgy-shadow-dropdown: 0 4px 12px rgba(0,0,0,0.2);
}