/* =========================================================
   Design Tokens — Bridge Club Iasi — Design 1
   =========================================================
   Green/gold felt-table theme voted on by club members.
   Every visual property should reference these custom
   properties so that a theme change is a single-file edit.
   ========================================================= */

:root {
    /* ----- Colors: Brand (Design 1 — Felt Green / Gold) ----- */
    --color-primary:        #1a3c34;   /* deep green */
    --color-primary-light:  #2d6a4f;   /* felt green */
    --color-primary-dark:   #15332c;   /* darker green */
    --color-secondary:      #2d6a4f;   /* felt green */
    --color-secondary-light:#40916c;   /* light green */
    --color-accent:         #c9a84c;   /* gold */
    --color-accent-light:   #e0c872;   /* gold light */
    --color-accent-dark:    #9a7a2e;   /* gold dark */

    /* ----- Colors: Feedback ----- */
    --color-success:        #40916c;
    --color-warning:        #c9a84c;
    --color-error:          #b5342e;

    /* ----- Colors: Neutrals ----- */
    --color-neutral-50:     #faf6ee;   /* cream */
    --color-neutral-200:    #f0e8d8;   /* cream dark */
    --color-neutral-400:    #6b6b6b;   /* text-light */
    --color-neutral-600:    #3a3a3a;   /* text */
    --color-neutral-900:    #2c2c2c;   /* charcoal */

    /* ----- Colors: Surfaces ----- */
    --color-bg:             #faf6ee;   /* cream */
    --color-bg-alt:         #ffffff;   /* white */
    --color-bg-dark:        #f0e8d8;   /* cream dark */
    --color-text:           #3a3a3a;
    --color-text-muted:     #6b6b6b;
    --color-text-white:     #ffffff;
    --color-charcoal:       #2c2c2c;
    --color-red-suit:       #b5342e;

    /* ----- Typography ----- */
    --font-family-heading:  'Georgia', 'Times New Roman', serif;
    --font-family-base:     -apple-system, BlinkMacSystemFont,
                            "Segoe UI", Roboto, sans-serif;
    --font-family-mono:     'JetBrains Mono', 'Fira Code', monospace;

    --font-size-xs:         0.75rem;   /* 12px */
    --font-size-sm:         0.875rem;  /* 14px */
    --font-size-base:       1rem;      /* 16px */
    --font-size-lg:         1.125rem;  /* 18px */
    --font-size-xl:         1.25rem;   /* 20px */

    --font-size-h6:         1rem;      /* 16px */
    --font-size-h5:         1.25rem;   /* 20px */
    --font-size-h4:         1.5rem;    /* 24px */
    --font-size-h3:         1.75rem;   /* 28px */
    --font-size-h2:         2rem;      /* 32px */
    --font-size-h1:         2.5rem;    /* 40px */

    --font-size-caption:    0.75rem;   /* 12px */

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

    --line-height-tight:    1.25;
    --line-height-base:     1.5;
    --line-height-relaxed:  1.75;

    /* ----- Spacing (4px base) ----- */
    --space-xs:             0.25rem;   /*  4px */
    --space-sm:             0.5rem;    /*  8px */
    --space-md:             1rem;      /* 16px */
    --space-lg:             1.5rem;    /* 24px */
    --space-xl:             2rem;      /* 32px */
    --space-xxl:            3rem;      /* 48px */

    /* ----- Border Radius ----- */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            16px;
    --radius-pill:          9999px;

    /* ----- Shadows ----- */
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.12);

    /* ----- Transitions ----- */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
}

/* =========================================================
   Breakpoints (reference — cannot be used in var())
   ---------------------------------------------------------
   Mobile:   < 768px
   Tablet:   768px  – 1024px
   Desktop:  > 1024px
   ========================================================= */