/* ==========================================================================
   SEKOLAH-PLATFORM - design tokens
   --------------------------------------------------------------------------
   THE ONLY FILE IN THIS PROJECT ALLOWED A COLOUR LITERAL.

   DesignTokensOnlyTest fails the build on a hex, rgb() or hsl() anywhere else
   in public/css, resources/css or any Blade file. The reason is not tidiness:
   brand values are per tenant, so a literal somewhere else is a value no school
   can ever change, and the school that wants it changed is a paying client.

   Every value here is a SAFE DEFAULT, not the design. A tenant's own colours
   arrive as a :root{} delta from BrandService, in the document head, after this
   file. Tokens live in their own file precisely so that a page whose inline
   delta is missing still renders a correct, legible site in platform colours
   instead of rendering unstyled.

   The vocabulary is taken from SLB-C-YKB/main-website's public.css so that the
   public site and the Filament panel read as one system - the panel reuses
   these token NAMES. Only the values are tenant-supplied.

   Mobile-first: no max-width media query lives here or anywhere else
   (MobileFirstTest).
   ========================================================================== */

:root {
    /* ---- Tenant-supplied, with a neutral platform default ----------------
       A school that has chosen nothing gets a restrained slate blue: it is
       legible, it is obviously not a school's own identity, and it is not one
       real client's colours standing in as everybody's default. */
    --brand-primary: #2f4a6d;
    --brand-primary-dark: #22364f;
    --brand-primary-light: #3f618c;
    --brand-primary-50: #eef2f7;

    /* Text ON a light background, in the brand hue. Never the same token as
       --brand-primary: BrandService darkens this one until it clears 4.5:1,
       because a school is free to pick a pale brand colour and a pale colour as
       body text is a site people quietly leave rather than report. */
    --brand-primary-text: #22364f;

    /* Text ON the brand colour. Chosen by measured contrast, not assumed. */
    --brand-on-primary: #ffffff;

    /* Text ON the dark shade, which is the footer. A separate token because the two
       backgrounds really do differ: a school with a pale primary gets dark text on
       the hero, and that same dark text on the dark footer would be unreadable. */
    --brand-on-primary-dark: #ffffff;

    --brand-secondary: #c8872b;
    --brand-secondary-dark: #a06c1f;
    --brand-secondary-light: #fdf4e6;

    --brand-accent: #2f7d6b;
    --brand-accent-dark: #22604f;

    /* ---- Fixed: readability, not identity ------------------------------- */
    --brand-ink: #1a1a1a;
    --brand-body: #33323a;
    --brand-muted: #5c5a66;
    --brand-surface: #faf9fc;
    --brand-surface-card: #ffffff;
    --brand-border: #e4e2ea;

    /* ---- Shape ---------------------------------------------------------- */
    --brand-radius-sm: 0.375rem;
    --brand-radius: 0.625rem;
    --brand-radius-lg: 1rem;

    /* 44px, and the unit is not negotiable.
       WCAG 2.5.5 and ~/.ai/AGENTS.md section 8: a touch target is at least
       44px, enforced by the height of the clickable element rather than the
       margin around it. The browser harness MEASURES against this token, so a
       rem value that a user's font setting could shrink would make the
       measurement and the rule disagree. DesignTokensOnlyTest asserts the
       literal. */
    --brand-touch: 44px;

    --brand-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --brand-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --brand-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    /* ---- Type ----------------------------------------------------------- */
    --brand-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --brand-font-heading: var(--brand-font-body);

    /* 1rem, because iOS Safari zooms the page when a focused input is below
       16px and then leaves it scrolled sideways. The harness measures this too. */
    --brand-input-size: 1rem;
}