/*
 * SchoolCMS – Design Tokens
 * ─────────────────────────────────────────────────────────────
 * THIS IS THE ONLY FILE THAT CHANGES BETWEEN SITES.
 * Replace the values below with the client's brand colours,
 * fonts, and spacing. All block CSS references these variables.
 *
 * Naming convention (mirrors the Rikkyo build):
 *   – Colours are PRIMITIVES, one token per colour named after the
 *     colour itself (--color-orange, --color-teal) – never roles
 *     like "primary"/"secondary". On a site build, one token per
 *     Figma colour variable, named after the variable.
 *   – Text styles are full font shorthands ([style] weight
 *     size/line-height family), one token per text style – on a site
 *     build, one per Figma text style – named by their METRICS, never
 *     their role (--text-40ob = 40px Open Sans Bold); the Figma style
 *     name rides in the comment. Cathedral's convention.
 *   – Everything is px – no rem/em units anywhere in the theme.
 *
 * How to update for a new site:
 *   1. Replace the colour block with one token per Figma colour
 *      variable, named after the variable
 *   2. Replace the font tokens with one per family the text styles
 *      use, named after the family (--font-open-sans), pick each
 *      family's letter, and replace the --text-* styles with one token
 *      per Figma text style (families load via @font-face at the top
 *      of css/base/typography.css)
 *   3. Adjust --container-width if the design uses a wider/narrower max-width
 *   4. Adjust spacing and border-radius to match the design
 * ─────────────────────────────────────────────────────────────
 */

:root {

    /* ── Colours ─────────────────────────────────────────────── */
    /* Innermedia brand palette – the neutral base for designers/
       developers to visualise designs on; replace per site */

    /* Brand */
    --color-orange:        #ff7e16;   /* Innermedia orange – links, highlights, active states */
    --color-orange-dark:   #da6118;   /* darker orange – hover states, large headings on white */
    --color-black:         #121d21;   /* Innermedia black – body ink, dark sections, buttons */
    --color-teal:          #a7cbce;   /* Innermedia teal – accents and tints (light: dark text on it) */
    --color-cream:         #e5e4d4;   /* Innermedia cream – light panel/section backgrounds */

    /* Neutral */
    --color-white:         #ffffff;
    --color-grey:          #dcdce3;   /* borders, placeholder grey, carousel dots */
    --color-grey-dark:     #676767;   /* meta text, captions */

    /* ── Typography ──────────────────────────────────────────── */
    --font-open-sans:      'Open Sans', sans-serif;
    --font-georgia:        'Georgia', serif;  /* display accents – stats, pull quotes */

    /* Text styles – one token per text style (on a site build, one per
       Figma text style), named by METRICS, never by role:
         --text-<size><family><weight>
         family: one letter per family – o = Open Sans, g = Georgia
         weight: l = Light (300), r = Regular (400), b = Bold (700);
                 o = Oblique – italic at 400 (bold italic: bo)
       Two styles sharing size + family + weight but differing in
       line-height or tracking take a role suffix (--text-16or-button).
       Value: full font shorthand – [style] weight size/line-height
       family – line-height in px (or `normal` for the design's Auto).
       letter-spacing can't ride in the shorthand: a style with tracking
       says so in its comment and the consumer sets it.
       The comment names the design's text style, so the roles stay
       readable without a lookup. Ordered by size. */
    --text-14or:        400 14px/21px var(--font-open-sans);         /* Small – captions, meta, breadcrumbs */
    --text-16or:        400 16px/26px var(--font-open-sans);         /* Body */
    --text-16or-button: 400 16px/22px var(--font-open-sans);         /* Button */
    --text-16or-menu:   400 16px/40px var(--font-open-sans);         /* Menu panel – level 3 links, desktop columns (the row pitch is the line-height; Rikkyo's --text-body-menu) */
    --text-16ob:        700 16px/26px var(--font-open-sans);         /* Body Bold */
    --text-18ob:        700 18px/22px var(--font-open-sans);         /* Heading 6 */
    --text-20or:        400 20px/32px var(--font-open-sans);         /* Body Large */
    --text-20or-menu:   400 20px/45px var(--font-open-sans);         /* Menu panel – level 2 links (Rikkyo's --text-h4-english) */
    --text-20ob:        700 20px/24px var(--font-open-sans);         /* Heading 5 */
    --text-20ob-menu:   700 20px/45px var(--font-open-sans);         /* Menu panel – level 1 links, phone panes (Rikkyo's 20px display face) */
    --text-24oo:        italic 400 24px/36px var(--font-open-sans);  /* Quote / Blockquote */
    --text-24ob:        700 24px/29px var(--font-open-sans);         /* Heading 4 */
    --text-30ob:        700 30px/55px var(--font-open-sans);         /* Menu panel – level 1 links, desktop columns (Rikkyo's --text-h3-menu) */
    --text-32ob:        700 32px/38px var(--font-open-sans);         /* Heading 3 */
    --text-40ob:        700 40px/48px var(--font-open-sans);         /* Heading 2 */
    --text-48ob:        700 48px/58px var(--font-open-sans);         /* Heading 1 */

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

    /* ── Layout ──────────────────────────────────────────────── */
    /* One width: Bootstrap's .container from 1200px up – 1296 of content
       inside its 12px + 12px gutters. There is no wide variant. */
    --container-width:      1320px;

    /* ── Borders & Radius ────────────────────────────────────── */
    /* Square corners theme-wide for the neutral base – set per site.
       (Circular shapes like plus buttons/dots use border-radius: 50%
       directly – that's geometry, not corner rounding.) */
    --border-radius-sm:   0;
    --border-radius-md:   0;
    --border-radius-lg:   0;
    --border-radius-pill: 100vmax;  /* fully-rounded ends for chips/tags */

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.18);

    /* ── Transitions ─────────────────────────────────────────── */
    /* base is the house speed – every hover and focus state runs on it.
       fast is the menu panel's desktop column swap alone (menu.css), a
       column answering a click rather than a hover. */
    --transition-fast: 0.08s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* ── Plugin blocks ───────────────────────────────────────── */
    /* The Interactive Map and DOB Checker blocks come from the Innermedia
       2D Map and Innermedia DOB Checker plugins, which read these custom
       properties (each plugin's README lists the full set). The DOB
       Checker's defaults are this file's tokens already; the map's are
       not, so it is pointed at the palette here – restyle a site's map
       through these, never in the plugin. */
    --im-2d-map-accent:          var(--color-orange);       /* pin disc, label pill */
    --im-2d-map-accent-hover:    var(--color-black);        /* pin disc on hover */
    --im-2d-map-accent-contrast: var(--color-white);        /* text and rings on the accent */
    --im-2d-map-media-bg:        var(--color-black);        /* behind popup images and the video poster */
    --im-2d-map-control-text:    var(--color-black);        /* carousel arrows */
    --im-2d-map-note:            var(--color-orange-dark);  /* the logged-in notes */
    --im-2d-map-radius:          var(--border-radius-md);   /* popup corners */

}

/* ── Divider / Spacer sizes (used by divider block) ── */
.spacer-xs {
    height: var(--space-sm);
}
.spacer-sm {
    height: var(--space-lg);
}
.spacer-md {
    height: var(--space-xl);
}
.spacer-lg {
    height: var(--space-2xl);
}
.spacer-xl {
    height: var(--space-3xl);
}
/* Style: Line – a 1px rule vertically centred within the chosen spacer */
.divider-line {
    background: linear-gradient(var(--color-grey), var(--color-grey)) center / 100% 1px no-repeat;
}