/* =====================================================================
   tokens.css — single source of truth for colors, spacing, etc.
   Loaded before style.css so all other rules can reference these vars.

   Usage rules:
     - In CSS: use var(--color-primary) instead of raw hex.
     - In EJS/HTML: prefer the utility classes below over inline style="".
     - When adding a new visual concept, add a token here first.
   ===================================================================== */

:root {
    /* Brand */
    --color-primary:        #ff565d;
    --color-primary-hover:  #e63a41;

    /* Surfaces / tile backgrounds (semantic, not literal) */
    --color-success-bg:     #c6e6c7;
    --color-warning-bg:     #ffeea5;
    --color-info-bg:        #dbfaff;
    --color-surface:        #fff;

    /* Text */
    --color-text:           #222;
    --color-text-muted:     #666;
    --color-text-on-accent: #fff;

    /* Neutral grays (used for borders, disabled text, alt surfaces) */
    --color-border:         #a0a0a0;  /* input borders, dividers */
    --color-text-disabled:  #b3b3b3;  /* hint / placeholder text */
    --color-surface-alt:    #e7e7e7;  /* section header backgrounds */
    --color-surface-muted:  #eee;     /* subtle surface tint */

    /* Lesson highlight colors (used in blog/grammar pages).
       Match the legacy <font color="..."> values so refactored pages
       render identically. Tweak here to recolor lessons site-wide. */
    --color-lesson-red:    red;
    --color-lesson-blue:   blue;
    --color-lesson-green:  green;
    --color-lesson-purple: purple;

    /* Spacing scale (use these instead of arbitrary px / %) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radius / shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .12);

    /* Typography */
    --font-base:    'Roboto', system-ui, -apple-system, sans-serif;
    --font-display: 'Montserrat', 'Roboto', sans-serif;

    /* Breakpoint reference (for documentation; @media still needs a literal) */
    --bp-mobile: 768px;

    /* Layout heights — different per device class.
       Used by sticky headers/footers. */
    --header-height:        70px;
    --footer-height:        4dvh;
    --header-height-mobile: 70px;
    --footer-height-mobile: 6dvh;
}

/* =====================================================================
   Utility classes — small, single-purpose, safe to combine.
   Prefer these over inline style="" in templates.
   ===================================================================== */

/* Text color */
.text-accent {
   font-family: 'Roboto', sans-serif;
   color: var(--color-primary);
   font: inherit;
}
.text-muted  { color: var(--color-text-muted); }

/* Background helpers (used by tiles / cards) */
.bg-success { background-color: var(--color-success-bg); }
.bg-warning { background-color: var(--color-warning-bg); }
.bg-info    { background-color: var(--color-info-bg); }

/* Lesson highlight colors.
   Used in blog/grammar pages to mark hard vs soft patterns,
   subject/verb/object roles, etc. Keep the literal color names
   so legacy content stays visually identical. */
.txt-color-red    { color: var(--color-lesson-red); }
.txt-color-blue   { color: var(--color-lesson-blue); }
.txt-color-green  { color: var(--color-lesson-green); }
.txt-color-purple { color: var(--color-lesson-purple); }

/* Spacing — margin-left only (most common inline use today). Extend as needed. */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }

/* Visually hidden but accessible */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}