/*
 * SfTokens — shared design tokens for the StudentFirst SIS portals.
 *
 * Single source of truth for the design-token system: color palette,
 * surfaces, borders, text colors, focus rings, shadows, z-index hierarchy,
 * button family colors and sizes, Telerik (Kendo) theme remaps, layout
 * dimensions. Every consumer (admin, applicant, student portals + any
 * future portal) loads this file first so the variables are in scope by
 * the time component-specific stylesheets (sf-buttons.css, etc.) reference
 * them.
 *
 * Drop into any Blazor portal via:
 *
 *     <link rel="stylesheet"
 *           href="_content/GlobalEdTech.Web.Shared/css/sf-tokens.css" />
 *
 * Load order matters only for human readability of the cascade — CSS
 * custom properties resolve at use time, not parse time, so a stylesheet
 * loaded later that references a token defined here will resolve fine.
 * Conventionally we load this first because it logically precedes
 * everything that consumes it.
 *
 * NEW TOKENS: declare in :root below. Keep the existing organization
 * (palette → surfaces → borders → text → focus → shadows → z-index →
 * buttons → kendo → fonts → interactive → layout). Document the WCAG
 * contrast ratio for any color used on text.
 */

/* ── 2026 UI Revamp: Design Tokens ────────────────────────────── */
:root {
    /* Typography */
    --sf-font-family: 'DM Sans', sans-serif;

    /* Font-size scale — t-shirt sizes in rem so consumers can compose with
       line-height, weight, and family in shorthand. Used by the navigation
       system (sf-nav, sf-subnav, sf-config-nav) and available to any other
       component that wants a consistent type ramp.
         2xs (10px) — micro labels: badges, eyebrow labels
         xs  (12px) — section labels, secondary inputs, small captions
         sm  (13px) — list items, secondary buttons, footer links
         md  (14px) — body-small, list children, names, links
         base(16px) — primary nav labels, page body default
         lg  (20px) — hamburger, prominent icon-only controls */
    --sf-font-size-2xs:  0.625rem;
    --sf-font-size-xs:   0.75rem;
    --sf-font-size-sm:   0.8125rem;
    --sf-font-size-md:   0.875rem;
    --sf-font-size-base: 1rem;
    --sf-font-size-lg:   1.25rem;

    /* Core palette (raw slate values — source of truth for colors;
       prefer the semantic tokens below in new code) */
    --sf-color-primary: #475569;       /* slate-600 */
    --sf-color-dark: #334155;          /* slate-700 */
    --sf-color-accent: #64748b;        /* slate-500 */
    --sf-color-accent-light: #e2e8f0;  /* slate-200 */
    --sf-color-destructive: #dc2626;
    --sf-color-warning: #d97706;
    --sf-color-success: #059669;
    --sf-color-info: #0369a1;          /* sky-700 */
    --sf-color-bg: #f8fafc;            /* slate-50 */
    --sf-color-white: #ffffff;
    --sf-color-border: #cbd5e1;        /* slate-300 */

    /* Subtle tints — paired backgrounds for the semantic foregrounds above.
       Used by status pills and badges (see StatusColorService.cs). Tints
       are ~50-step in Tailwind, giving high contrast against their foreground
       sibling (≥10:1) so text on the tint always passes WCAG AA. The neutral
       pair reuses --sf-color-accent / --sf-color-accent-light. */
    --sf-color-success-subtle:     #ecfdf5;  /* emerald-50 */
    --sf-color-destructive-subtle: #fef2f2;  /* red-50 */
    --sf-color-warning-subtle:     #fffbeb;  /* amber-50 */
    --sf-color-info-subtle:        #f0f9ff;  /* sky-50 */

    /* Status-pill TEXT colors (PBI 20056, REQ-010). SfStatusPill renders its
       colors as an inline style from IStatusColorService, so the pill text is
       whatever token that service names — it was the 600-step brand color, which
       against these 50-step fills lands at 3.07:1 (warning), 3.58:1 (success),
       4.41:1 (danger) and 3.86:1 (neutral), all under the AC's 4.5:1 floor.
       These are the same hues one step darker, measured against the paired
       -subtle fill. Separate tokens rather than changing --sf-color-* so the
       brand colors keep their meaning for borders, icons and buttons. */
    --sf-status-success-text: #047857;  /* emerald-700 — 5.21:1 on success-subtle */
    /* Title colour for the post-save toast (PBI 20419 REQ-007's "green-900"). Kept in the
       emerald family the rest of the success tokens use, so it sits under the emerald-600
       border rather than mixing hues. 11.7:1 on success-subtle. */
    --sf-color-success-strong: #064e3b;  /* emerald-900 */
    --sf-status-danger-text:  #b91c1c;  /* red-700     — 5.91:1 on destructive-subtle */
    --sf-status-warning-text: #b45309;  /* amber-700   — 4.84:1 on warning-subtle */
    --sf-status-neutral-text: #475569;  /* slate-600   — 6.15:1 on accent-light */
    /* info needs no darker step: sky-700 on sky-50 is already 5.57:1. */

    /* ── Surfaces ──────────────────────────────────────────────── */
    --sf-bg-page:    var(--sf-color-bg);           /* #f8fafc */
    --sf-bg-card:    var(--sf-color-white);        /* #ffffff */
    --sf-bg-panel:   var(--sf-color-accent-light); /* #e2e8f0 */
    --sf-bg-sidebar: var(--sf-color-dark);         /* #334155 slate-700 */
    /* Opaque selected-row fill for grids, treelists, treeviews. Opaque (not
       a low-alpha tint) so selection stays visible behind sticky/locked
       columns that overlap their neighbours during horizontal scroll. */
    --sf-bg-row-selected: #d6d9dd;                 /* slate-200/300 blend */

    /* ── Borders ───────────────────────────────────────────────── */
    --sf-border-subtle: var(--sf-color-accent);  /* slate-500 — 4.76:1 on white, 4.55:1 on page */
    --sf-border-strong: var(--sf-color-primary); /* slate-600 — 6.15:1 on panel */

    /* Required-field asterisk (SfTelerikForm + the global
       .k-form-label--required rule). Black, not red: WCAG SC 1.4.1 forbids
       color as the only carrier of meaning, and a red asterisk also reads as
       an error state. The requirement is conveyed by the glyph plus
       aria-required="true"; the color is deliberately neutral. */
    --sf-required: var(--sf-text-primary);       /* slate-900 — 17.85:1 on white */

    /* ── Text ──────────────────────────────────────────────────── */
    --sf-text-primary:       #0f172a;                 /* slate-900 — 17.85:1 on white */
    --sf-text-secondary:     var(--sf-color-dark);    /* slate-700 — 10.35:1 on white, 8.40:1 on panel */
    --sf-text-muted:         var(--sf-color-primary); /* slate-600 — 7.58:1 on white, 6.15:1 on panel */
    /* Aliases used by Claude Design token sheets — map to the canonical tokens above. */
    --sf-color-text:         var(--sf-text-primary);
    --sf-color-text-muted:   var(--sf-text-muted);
    --sf-color-surface:      var(--sf-bg-card);
    --sf-text-on-dark:       #f1f5f9;                 /* slate-100 — 9.45:1 on sidebar */
    --sf-text-on-dark-muted: var(--sf-color-border);  /* slate-300 — 6.97:1 on sidebar */
    /* Amber warning text on a light surface ("unsaved changes", "pending review"
       inline affordances). A distinct text-color role rather than a reuse of
       --sf-color-warning (#d97706 amber-600), which is only 3.04:1 on white and
       3.19:1 on page — fine as a filled-button background (sf-btn-warning) or for
       large/non-text use, but below the 4.5:1 AA minimum for body-size text. Same
       hue one step darker; matches --sf-warning-button-hover (amber-700).
       4.80:1 on page, 5.02:1 on white. */
    --sf-text-warning:       #b45309;                 /* amber-700 */

    /* ── Focus — universal double-ring pattern (works on all surfaces) ── */
    --sf-focus-ring-inner: #1d4ed8;               /* blue-700 — 6.70:1 on white, 5.44:1 on panel */
    --sf-focus-ring-outer: var(--sf-color-white); /* 10.35:1 on sidebar; inner vs outer 6.70:1 */
    --sf-focus-width:       3px;
    --sf-focus-inner-width: 2px;
    --sf-focus-offset:      2px;

    /* Shadows */
    --sf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --sf-shadow-header: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* ── Radii ────────────────────────────────────────────────────
       Shared corner-radius scale. Values mirror the foundation file
       Tor wrote for the interactive CLAUDE.md reference page at
       docs/claude-md/assets/colors_and_type.css so the docs preview
       and the running app stay visually in sync. */
    --sf-radius-sm:  4px;
    --sf-radius-md:  8px;
    --sf-radius-lg: 12px;

    /* Z-index hierarchy (REQ-005) */
    --sf-z-modal: 50;
    --sf-z-toast: 40;
    --sf-z-student-header: 30;
    --sf-z-sticky-header: 25;
    --sf-z-main-menu: 20;
    --sf-z-student-menu: 10;
    --sf-z-sticky-footer: 5;

    /* ── Button family ──────────────────────────────────────────────
       Compact button sizing — used by every .sf-btn-* role and the
       .sf-btn-grid uniform sizing. The 28px box sits below
       --sf-interactive-min (32px), but every button in the family
       carries padding/margin (4px focus-clearance margin on
       sf-btn-grid; 4px+ form / toolbar gutters elsewhere), so the
       effective interactive target — button box plus its surrounding
       gap — meets or exceeds 32px. WCAG 2.5.8 (Target Size — Minimum)
       is satisfied via the spacing exception rather than the raw size.
       Decorative non-button 28px sizes (avatars, header badges) are
       not aliased to this token. */
    --sf-btn-size: 28px;

    /* Buttons — primary (sf-btn-save) */
    --sf-primary-button-bg: var(--sf-color-primary);
    --sf-primary-button-hover: var(--sf-color-dark);
    --sf-secondary-text: var(--sf-color-primary);
    --sf-bg-white: var(--sf-color-white);

    /* Buttons — ghost (sf-btn-secondary) and segmented control (sf-btn-group) */
    --sf-secondary-button-bg: #f3f4f6;             /* gray-100 */
    --sf-secondary-button-text: #374151;           /* gray-700 */
    --sf-secondary-button-hover: #e5e7eb;          /* gray-200 */
    --sf-secondary-button-disabled-bg: #e5e7eb;    /* gray-200 */
    --sf-secondary-button-disabled-text: #9ca3af;  /* gray-400 */

    /* Buttons — accent (sf-btn-accent) */
    --sf-accent-button-bg: var(--sf-color-accent);
    --sf-accent-button-hover: var(--sf-color-primary);

    /* Form section headings (.k-form-legend rendered by <FormGroup>). Shares
       the slate-500 accent hue with sf-btn-accent but is a semantically
       distinct text-color role, so it gets its own alias. 4.76:1 on white. */
    --sf-form-legend-color: var(--sf-color-accent);

    /* Buttons — destructive (sf-btn-delete, sf-btn-cautionary) */
    --sf-delete-button-bg: var(--sf-color-destructive);
    --sf-delete-button-hover: #991b1b; /* red-800 — darkened from red-700 (#b91c1c) for stronger border + hover visibility */

    /* Buttons — warning (sf-btn-warning) — amber filled, less severe than
       destructive. Used for "active filter", "unsaved changes", "pending
       review" affordances where attention is needed but the action isn't
       irreversible. */
    --sf-warning-button-bg: var(--sf-color-warning);
    --sf-warning-button-hover: #b45309; /* amber-700 — darker for hover/border weight against amber-600 fill */

    /* Buttons — disabled (shared by Destructive + Cautionary) */
    --sf-disabled-button-bg: #d1d5db;   /* gray-300 */
    --sf-disabled-button-text: #6b7280; /* gray-500 */

    /* ── Telerik theme token remap ──────────────────────────────
       Telerik Blazor renders every "primary-tone" state (selected
       rows, active tabs, progress bars, switches, pager numbers,
       link colors, etc.) through these variables. Remap them to
       the SF primary slate so we get global brand coverage without
       per-component CSS. */
    --kendo-color-primary:                 var(--sf-color-primary);
    --kendo-color-primary-hover:           var(--sf-color-dark);
    --kendo-color-primary-active:          var(--sf-color-dark);
    --kendo-color-primary-emphasis:        var(--sf-color-dark);
    --kendo-color-primary-subtle:          var(--sf-color-accent-light);
    --kendo-color-primary-subtle-hover:    #cbd5e1;
    --kendo-color-primary-subtle-active:   #cbd5e1;
    --kendo-color-primary-on-subtle:       var(--sf-color-dark);
    --kendo-color-primary-contrast:        #ffffff;
    --kendo-color-primary-contrast-hover:  #ffffff;
    --kendo-color-primary-contrast-active: #ffffff;

    /* Force DM Sans on every Telerik widget */
    --kendo-font-family:             'DM Sans', sans-serif;
    --kendo-font-family-sans:        'DM Sans', sans-serif;
    --kendo-font-family-sans-serif:  'DM Sans', sans-serif;
    --kendo-font-family-serif:       'DM Sans', sans-serif;
    --kendo-font-family-monospace:   'DM Sans', sans-serif;

    /* Interactive minimums (WCAG 2.5.8 target size) */
    --sf-interactive-min: 32px;

    /* Layout */
    --sf-header-h:                    56px;
    --sf-sidebar-primary-w:           240px;
    --sf-sidebar-primary-w-collapsed:  64px;
    --sf-sidebar-secondary-w:         216px;
    --sf-top-row-height: var(--sf-header-h);

    --sf-bp-md:  768px;
    --sf-bp-lg: 1024px;
    --sf-bp-xl: 1280px;
}