/*
 * 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;

    /* 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-bg: #f8fafc;            /* slate-50 */
    --sf-color-white: #ffffff;
    --sf-color-border: #cbd5e1;        /* slate-300 */

    /* ── 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 */

    /* ── 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 */

    /* ── 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);

    /* 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);

    /* 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 — 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;
}