/* =============================================================================
   Chess Courses — Design Tokens
   Auto-generated by Designer Agent. Single source of truth for the theme.
   Palette: deep board green (voltage) + brass/amber (accent) on warm ivory.
   Adapted from the Airbnb structural system — one brand voltage carries every
   primary CTA; generous soft rounding; restrained, ultra-diffuse shadows.
   ============================================================================= */

:root {
    /* ---------------------------------------------------------------------
       COLORS — Primary (Board Green) : the single brand voltage
       --------------------------------------------------------------------- */
    --color-primary-50:  #edf9f2;
    --color-primary-100: #d2f0e0;
    --color-primary-200: #a6e0c2;
    --color-primary-300: #6fca9f;
    --color-primary-400: #3caf7c;
    --color-primary-500: #1f9463;  /* main brand */
    --color-primary-600: #167a51;  /* CTA base */
    --color-primary-700: #136241;  /* hover / emphasis */
    --color-primary-800: #124e35;
    --color-primary-900: #10402c;  /* deep board green */

    /* COLORS — Accent (Brass / Amber) : the golden king, highlights & badges */
    --color-accent-50:  #fdf6e9;
    --color-accent-100: #fae9c4;
    --color-accent-200: #f4d38a;
    --color-accent-300: #edb94f;
    --color-accent-400: #e3a127;
    --color-accent-500: #d18a12;  /* main accent */
    --color-accent-600: #b06f0e;
    --color-accent-700: #8c560f;  /* accent text on light / accent CTA */
    --color-accent-800: #714512;
    --color-accent-900: #5f3a13;

    /* COLORS — Neutral (warm, espresso-tinted — never pure gray) */
    --color-neutral-50:  #faf8f5;  /* warm ivory canvas */
    --color-neutral-100: #f4f1ec;
    --color-neutral-200: #e7e2d9;  /* hairlines, dividers */
    --color-neutral-300: #d5cec1;
    --color-neutral-400: #a8a094;
    --color-neutral-500: #7a7266;  /* muted text */
    --color-neutral-600: #5c554b;
    --color-neutral-700: #443f37;
    --color-neutral-800: #2a2620;
    --color-neutral-900: #1a1712;  /* warm ink (near-black) */

    /* COLORS — Semantic */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error:   #dc2626;
    --color-info:    #2563eb;

    /* COLORS — Roles (light surfaces) */
    --color-bg:            var(--color-neutral-50);
    --color-surface:       #ffffff;   /* card canvas — pure white cards on ivory bg */
    --color-surface-soft:  var(--color-neutral-100);
    --color-surface-strong:var(--color-neutral-200);
    --color-text:          var(--color-neutral-900);
    --color-text-body:     var(--color-neutral-700);
    --color-text-muted:    var(--color-neutral-500);
    --color-on-primary:    #ffffff;
    --color-on-accent:     #ffffff;
    --color-hairline:      var(--color-neutral-200);
    --color-hairline-soft: var(--color-neutral-100);
    --color-border-strong: var(--color-neutral-300);

    /* COLORS — Roles (dark surfaces) — for footers, feature bands, night sections */
    --color-dark-bg:       #14180f;   /* deep warm-green ink */
    --color-dark-surface:  #1d241a;
    --color-dark-text:     #f4f1ec;
    --color-dark-muted:    #a8a094;
    --color-dark-hairline: #33402c;

    /* Primary as RGB for glows / translucent fills */
    --color-primary-rgb: 22, 122, 81;
    --color-accent-rgb:  209, 138, 18;

    /* ---------------------------------------------------------------------
       TYPOGRAPHY
       --------------------------------------------------------------------- */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale — comfortable density, 1.250 (major second) ratio, 16px base */
    --text-xs:   0.75rem;   /* 12px  — captions, tags */
    --text-sm:   0.875rem;  /* 14px  — labels, meta */
    --text-base: 1rem;      /* 16px  — body */
    --text-lg:   1.25rem;   /* 20px  — lead paragraph */
    --text-xl:   1.563rem;  /* 25px  — h4 / card titles */
    --text-2xl:  1.953rem;  /* 31px  — h3 */
    --text-3xl:  2.441rem;  /* 39px  — h2 */
    --text-4xl:  3.052rem;  /* 49px  — h1 / display */

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

    --letter-tight:  -0.02em;   /* headlines */
    --letter-tighter:-0.035em;  /* large display */
    --letter-normal: 0;
    --letter-wide:   0.05em;    /* uppercase labels */

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.65;
    --leading-relaxed: 1.75;

    --measure: 65ch;            /* max body line length */

    /* ---------------------------------------------------------------------
       SPACING — 8px base grid
       --------------------------------------------------------------------- */
    --space-0:  0;
    --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-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    --space-section: clamp(4rem, 8vw, 7rem);  /* comfortable section rhythm */

    /* ---------------------------------------------------------------------
       BORDERS & RADII — soft, friendly rounding (Airbnb-spirit)
       --------------------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm:   6px;
    --radius-md:   10px;   /* default (buttons, inputs) */
    --radius-lg:   16px;   /* cards */
    --radius-xl:   22px;
    --radius-2xl:  28px;   /* feature panels, media wells */
    --radius-full: 9999px; /* pills, search bar, avatars */

    --border-width: 1px;
    --border-width-strong: 2px;

    /* ---------------------------------------------------------------------
       SHADOWS — ultra-diffuse, warm-tinted, low opacity
       --------------------------------------------------------------------- */
    --shadow-sm:    0 1px 2px rgba(26, 23, 18, 0.05);
    --shadow-md:    0 4px 12px rgba(26, 23, 18, 0.07);
    --shadow-lg:    0 8px 24px rgba(26, 23, 18, 0.09);
    --shadow-xl:    0 16px 48px rgba(26, 23, 18, 0.11);
    --shadow-inner: inset 0 1px 3px rgba(26, 23, 18, 0.06);
    --shadow-glow:  0 0 24px rgba(var(--color-primary-rgb), 0.18);
    --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.28);

    /* ---------------------------------------------------------------------
       MOTION — moderate intensity
       --------------------------------------------------------------------- */
    --duration-fast:   150ms;
    --duration-normal: 300ms;
    --duration-slow:   500ms;
    --duration-slower: 700ms;
    --ease-default: 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-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --stagger-normal: 0.1s;

    /* ---------------------------------------------------------------------
       LAYOUT
       --------------------------------------------------------------------- */
    --container-max:     1280px;
    --container-narrow:  768px;
    --container-padding: 1.5rem;
    --nav-height:        80px;
    --grid-gap:          var(--space-6);
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:   0ms;
        --duration-normal: 0ms;
        --duration-slow:   0ms;
        --duration-slower: 0ms;
        --stagger-normal:  0s;
    }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}