/* ==========================================================================
   SQU Visual Identity — Design Tokens
   Sultan Qaboos University · Research Management System

   Single source of truth for color, type, spacing, radius and shadows.
   Edit values here; the rest of the brand layer reads from these tokens.
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       PRIMARY PALETTE  (from SQU Visual Brand v1.0)
       Use Dark Blue as the dominant chrome color; Gold as the single accent.
       ------------------------------------------------------------------ */
    --squ-blue: #1f4ac2; /* SQU Dark Blue   — primary chrome, links, CTA   */
    --squ-gold: #e9a455; /* SQU Gold        — accent, active states, focus */
    --squ-blue-light: #008fba; /* SQU Light Blue  — info badges, secondary CTA  */
    --squ-purple: #733380; /* SQU Purple      — data viz, special tags        */
    --squ-black: #211f1f; /* SQU Black       — body text, hard borders       */

    /* ------------------------------------------------------------------
       SECONDARY PALETTE — reserved for status / data-viz / categories
       Do NOT use these as chrome backgrounds.
       ------------------------------------------------------------------ */
    --squ-red: #7d2626; /* danger / rejected / critical */
    --squ-green: #1a701c; /* success / approved           */
    --squ-sand: #dec4a3; /* warm neutral / draft         */
    --squ-building: #ad9482; /* warm neutral / archived      */
    --squ-gold-2: #d1a22a; /* warm category accent          */

    /* ------------------------------------------------------------------
       BLUE SCALE — tints & shades derived from --squ-blue
       Used for surfaces, borders, hover, depth.
       ------------------------------------------------------------------ */
    --squ-blue-50: #eff3fc;
    --squ-blue-100: #dde6f8;
    --squ-blue-200: #b8c9f0;
    --squ-blue-300: #8aa6e5;
    --squ-blue-400: #5a7fd6;
    --squ-blue-500: var(--squ-blue);
    --squ-blue-600: #1b3fa6;
    --squ-blue-700: #16348a;
    --squ-blue-800: #102a73;
    --squ-blue-900: #0b1f5c;

    /* ------------------------------------------------------------------
       GOLD SCALE — tints & shades derived from --squ-gold
       ------------------------------------------------------------------ */
    --squ-gold-50: #fdf5ec;
    --squ-gold-100: #faead4;
    --squ-gold-200: #f3d2a3;
    --squ-gold-300: #ecb872;
    --squ-gold-400: #e9a455;
    --squ-gold-500: var(--squ-gold);
    --squ-gold-600: #c8862f;
    --squ-gold-700: #a06823;
    --squ-gold-800: #794e1a;

    /* ------------------------------------------------------------------
       BRAND-EXACT TINTS  (per Visual Brand v1.0 — page "لوحة الألوان")
       Each brand color at 90 / 70 / 50 / 30 / 10 % strength (mixed with
       white). Use these whenever the brand calls for "tint X%" usage.
       Naming: --squ-<color>-t<percent>.   Examples:
         background: var(--squ-blue-t10);  (lightest brand wash)
         color:      var(--squ-purple-t90); (almost-full purple)
       ------------------------------------------------------------------ */

    /* SQU Dark Blue tints */
    --squ-blue-t10:  #e9edf9;
    --squ-blue-t30:  #bcc8ed;
    --squ-blue-t50:  #8fa5e0;
    --squ-blue-t70:  #6281d4;
    --squ-blue-t90:  #355cc8;

    /* SQU Gold tints */
    --squ-gold-t10:  #fcf6ee;
    --squ-gold-t30:  #f8e4cc;
    --squ-gold-t50:  #f4d2aa;
    --squ-gold-t70:  #f0bf88;
    --squ-gold-t90:  #ebad66;

    /* SQU Light Blue tints */
    --squ-blue-light-t10: #e6f4f8;
    --squ-blue-light-t30: #b3dded;
    --squ-blue-light-t50: #80c7dc;
    --squ-blue-light-t70: #4db1cf;
    --squ-blue-light-t90: #1a9ac1;

    /* SQU Purple tints */
    --squ-purple-t10: #f1ebf3;
    --squ-purple-t30: #d5c2d9;
    --squ-purple-t50: #b999c0;
    --squ-purple-t70: #9d70a6;
    --squ-purple-t90: #81478d;

    /* SQU Black tints (warm grey scale) */
    --squ-black-t10: #e8e8e8;
    --squ-black-t30: #bcbcbc;
    --squ-black-t50: #908f8f;
    --squ-black-t70: #646262;
    --squ-black-t90: #373535;

    /* SQU Red tints */
    --squ-red-t10:   #f2e9e9;
    --squ-red-t30:   #d8bebe;
    --squ-red-t50:   #be9292;
    --squ-red-t70:   #a46767;
    --squ-red-t90:   #8a3c3c;

    /* SQU Green tints */
    --squ-green-t10: #e8f1e8;
    --squ-green-t30: #bad4bb;
    --squ-green-t50: #8cb78d;
    --squ-green-t70: #5e9b60;
    --squ-green-t90: #317e33;

    /* SQU Sand tints */
    --squ-sand-t10:  #fcf9f6;
    --squ-sand-t30:  #f5ede3;
    --squ-sand-t50:  #efe2d1;
    --squ-sand-t70:  #e8d6bf;
    --squ-sand-t90:  #e1caac;

    /* SQU Building tints */
    --squ-building-t10: #f7f4f3;
    --squ-building-t30: #e6dfda;
    --squ-building-t50: #d6cac1;
    --squ-building-t70: #c6b4a8;
    --squ-building-t90: #b59f8f;

    /* SQU Gold 2 tints */
    --squ-gold-2-t10: #faf6e9;
    --squ-gold-2-t30: #f1e3bf;
    --squ-gold-2-t50: #e8d195;
    --squ-gold-2-t70: #dfbe6a;
    --squ-gold-2-t90: #d6ab3f;

    /* ------------------------------------------------------------------
       NEUTRALS — blue-tinted greys for cohesion with brand
       ------------------------------------------------------------------ */
    --squ-ink: #1a1f36; /* primary text                              */
    --squ-ink-2: #3a4358; /* secondary text                            */
    --squ-ink-3: #6b7592; /* muted text / labels                       */
    --squ-ink-4: #9aa3bc; /* hint / placeholder                        */
    --squ-line: #e5e7ef; /* default 1px borders                       */
    --squ-line-2: #eef0f6; /* faint borders / inner dividers           */
    --squ-surface: #ffffff; /* card / panel background                 */
    --squ-surface-2: #f7f8fb; /* page background                         */
    --squ-surface-3: #f0f2f7; /* sunken / striped table row              */

    /* ------------------------------------------------------------------
       SEMANTIC TOKENS — what UI elements actually use
       ------------------------------------------------------------------ */
    --squ-primary: var(--squ-blue);
    --squ-primary-hover: var(--squ-blue-600);
    --squ-primary-active: var(--squ-blue-700);
    --squ-primary-soft: var(--squ-blue-50);
    --squ-primary-soft-border: var(--squ-blue-100);

    --squ-accent: var(--squ-gold);
    --squ-accent-hover: var(--squ-gold-600);
    --squ-accent-soft: var(--squ-gold-50);

    --squ-success: var(--squ-green);
    --squ-success-soft: #e6f1e6;
    --squ-danger: var(--squ-red);
    --squ-danger-soft: #f5e3e3;
    --squ-info: var(--squ-blue-light);
    --squ-info-soft: #def0f6;
    --squ-warning: var(--squ-gold-2);
    --squ-warning-soft: var(--squ-gold-50);

    /* ------------------------------------------------------------------
       TYPOGRAPHY
       Primary family per brand: Effra CC (paid · Adobe Fonts).
       Free brand-approved digital substitute: IBM Plex Sans Arabic (Google Fonts).
       We use IBM Plex Sans Arabic as default for both EN + AR — one family,
       one rhythm, full RTL support.
       ------------------------------------------------------------------ */
    --squ-font: "Effra", "IBM Plex Sans Arabic", "Segoe UI", "Roboto",
                "Helvetica Neue", Arial, sans-serif;
    --squ-font-mono: "JetBrains Mono", "Consolas", "Menlo", monospace;

    --squ-fs-xs: 11px; /* micro labels, table footer captions */
    --squ-fs-sm: 12.5px; /* table body, form helper text         */
    --squ-fs-base: 13.5px; /* body                                 */
    --squ-fs-md: 15px; /* card title                            */
    --squ-fs-lg: 18px; /* section title                        */
    --squ-fs-xl: 22px; /* page title                            */
    --squ-fs-2xl: 28px; /* hero / KPI value                       */

    --squ-fw-regular: 400;
    --squ-fw-medium: 500;
    --squ-fw-semibold: 600;
    --squ-fw-bold: 700;

    --squ-lh-tight: 1.25;
    --squ-lh-base: 1.5;
    --squ-lh-loose: 1.7;

    --squ-letter-tight: -0.005em;
    --squ-letter-base: 0;
    --squ-letter-wide: 0.02em;

    /* ------------------------------------------------------------------
       SPACING — 4px base
       ------------------------------------------------------------------ */
    --squ-space-1: 4px;
    --squ-space-2: 8px;
    --squ-space-3: 12px;
    --squ-space-4: 16px;
    --squ-space-5: 20px;
    --squ-space-6: 24px;
    --squ-space-8: 32px;
    --squ-space-10: 40px;

    /* ------------------------------------------------------------------
       RADIUS — restrained, formal
       ------------------------------------------------------------------ */
    --squ-radius-sm: 4px;
    --squ-radius: 6px; /* default for buttons, inputs, cards */
    --squ-radius-md: 8px;
    --squ-radius-lg: 12px;
    --squ-radius-pill: 999px;

    /* ------------------------------------------------------------------
       ELEVATION — subtle, brand-tinted (not pure black)
       ------------------------------------------------------------------ */
    --squ-shadow-xs: 0 1px 2px rgba(16, 42, 115, 0.04);
    --squ-shadow-sm: 0 1px 3px rgba(16, 42, 115, 0.06),
                     0 1px 2px rgba(16, 42, 115, 0.04);
    --squ-shadow-md: 0 4px 12px rgba(16, 42, 115, 0.08);
    --squ-shadow-lg: 0 10px 30px rgba(16, 42, 115, 0.12);
    --squ-shadow-focus: 0 0 0 3px rgba(31, 74, 194, 0.18);
    --squ-shadow-focus-gold: 0 0 0 3px rgba(233, 164, 85, 0.28);

    /* ------------------------------------------------------------------
       CHROME HEIGHTS
       ------------------------------------------------------------------ */
    --squ-header-h: 54px;
    --squ-aside-w: 84px; /* bumped from 64 — gives more room for icons + text */
    --squ-btn-h: 34px;
    --squ-btn-h-sm: 28px;
    --squ-btn-h-lg: 40px;
    --squ-input-h: 36px;

    /* ------------------------------------------------------------------
       MOTION
       ------------------------------------------------------------------ */
    --squ-ease: cubic-bezier(0.2, 0, 0.2, 1);
    --squ-dur-fast: 120ms;
    --squ-dur: 180ms;
    --squ-dur-slow: 260ms;
}