/* Theme CSS - Global theme variables and styles for the app */

/* ===== Self-hosted Inter Font ===== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-Variable.woff2') format('woff2');
}

/* ===== Static tokens (don't change with theme) ===== */
:root {
    /* Primary palette (purple, based on #831CEF) */
    --palette-primary-50: #f5f0ff;
    --palette-primary-100: #ede0ff;
    --palette-primary-200: #d9bfff;
    --palette-primary-300: #c196ff;
    --palette-primary-400: #a55aff;
    --palette-primary-500: #831CEF;
    --palette-primary-600: #7017D4;
    --palette-primary-700: #5B12B0;
    --palette-primary-800: #480F8D;
    --palette-primary-900: #370B6B;

    /* Gray palette */
    --palette-gray-50: #f9fafb;
    --palette-gray-100: #f3f4f6;
    --palette-gray-200: #e5e7eb;
    --palette-gray-300: #d1d5db;
    --palette-gray-400: #9ca3af;
    --palette-gray-500: #6b7280;
    --palette-gray-600: #4b5563;
    --palette-gray-700: #374151;
    --palette-gray-800: #1f2937;
    --palette-gray-900: #111827;
    --palette-gray-950: #030712;

    /* Status colors */
    --palette-success: #22c55e;
    --palette-warning: #f59e0b;
    --palette-error: #ef4444;
    --palette-info: #06b6d4;

    /* === Extended semantic tokens (design-system lock 2026-08-01) ===
       Mode-invariant: these render the same value in light and dark, matching what the
       DOM already painted before the sweep (poke dots, presence dots, stars, read-ticks
       were all fixed hexes in both modes). Adaptive "-ink" text variants live in the
       themed blocks below. Rule: a NEW surface uses these names, never a raw palette
       utility — only named tokens can be mirrored into Giki.Maui. */
    /* Alias: five call sites referenced --color-danger, which never existed — two of
       them WITHOUT a fallback (PushEnrolment, NotificationSettings), so their error
       text silently rendered in the inherited colour. The canonical name is
       --color-error; this alias heals strays. Use --color-error in new code. */
    --color-danger: var(--color-error);

    --color-attention: #a855f7;   /* nudge/poke accent — deliberately NOT brand primary */
    --color-online:    #10b981;   /* presence "online" — same hue as success today but its own meaning */
    --color-star:      #f59e0b;   /* starred/pinned marker (chat stars) */
    --color-read:      #3b82f6;   /* read-receipt state (double ticks, seen-eye) */

    /* === Attention dot palette ===
       The five meanings from §1.6: red = overdue, green = done, amber = unread,
       cyan = follow-up, lilla = poke. Brugt af MeTodayPillStrip / MeTodayPillDot m.fl.

       MOVED HERE 2026-08-02. They stood in the THEMED :root block below - that is,
       the one with `color-scheme: light` - and were never overridden in `.dark`. They therefore
       worked only by luck in the cascade: had anybody moved the light block, or added a
       single `.dark` override, ALL FIVE signal colours would change silently. There is no
       warning for that sort of thing. They belong here, where the block itself says "don't change with
       theme", beside --color-attention, which already stood here for the same reason.
       No value is changed - it is a pure move. */
    --color-attn-overdue:  #ef4444; /* red    — Done not done / overdue */
    --color-attn-chat:     #f59e0b; /* amber  — unread chat messages    */
    --color-attn-followup: #06b6d4; /* cyan   — follow-up due           */
    --color-attn-poke:     var(--color-attention); /* purple — pokes    */
    --color-attn-done:     #22c55e; /* green  — completed               */

    /* === Role accents (assignment surfaces) ===
       The five role columns in the assignment panel + assign popover. Values match the
       hexes AtomFormModalAssignmentPanel painted before the sweep — no visual change. */
    --color-role-owner:           var(--color-primary);
    --color-role-assignee:        #10b981;
    --color-role-viewer:          #60a5fa;
    --color-role-template-owner:  #f59e0b;
    --color-role-template-viewer: #14b8a6;

    /* Accent (teal — complementary to purple) */
    --palette-accent-500: #14b8a6;
    --palette-accent-600: #0d9488;

    /* Slate palette (cooler grays for dark mode) */
    --palette-slate-50: #f8fafc;
    --palette-slate-100: #f1f5f9;
    --palette-slate-200: #e2e8f0;
    --palette-slate-300: #cbd5e1;
    --palette-slate-400: #94a3b8;
    --palette-slate-500: #64748b;
    --palette-slate-600: #475569;
    --palette-slate-700: #334155;
    --palette-slate-800: #1e293b;
    --palette-slate-900: #0f172a;
    --palette-slate-950: #020617;

    /* Indigo palette (purple-tinted accent) */
    --palette-indigo-50: #eef2ff;
    --palette-indigo-100: #e0e7ff;
    --palette-indigo-200: #c7d2fe;
    --palette-indigo-300: #a5b4fc;
    --palette-indigo-400: #818cf8;
    --palette-indigo-500: #6366f1;
    --palette-indigo-600: #4f46e5;
    --palette-indigo-700: #4338ca;
    --palette-indigo-800: #3730a3;
    --palette-indigo-900: #312e81;

    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ===== Light theme (default) ===== */
:root {
    color-scheme: light;

    /* Semantic colors */
    --color-primary: var(--palette-primary-500);
    --color-primary-hover: var(--palette-primary-600);
    --color-primary-light: var(--palette-primary-50);
    --color-primary-dark: var(--palette-primary-700);

    --color-accent: var(--palette-accent-500);
    --color-accent-hover: var(--palette-accent-600);

    --color-success: var(--palette-success);
    --color-warning: var(--palette-warning);
    --color-error: var(--palette-error);
    --color-info: var(--palette-info);

    /* Ink = readable foreground for a status colour, used as text on soft tints
       (bg-[var(--color-x)]/10-15) and for small status text. Replaces the hand-rolled
       "text-x-700 dark:text-x-400" pairs (design-system lock 2026-08-01). */
    --color-success-ink: #15803d;
    --color-warning-ink: #b45309;
    --color-error-ink: #b91c1c;
    --color-info-ink: #0e7490;
    --color-attention-ink: #9333ea;

    /* === Status-group badge fills (Me Today / Team Today) — LIGHT ===
       2026-08-03, Christian: "skru op for styrken i lyst tema". The flat /12 tint from the
       design-system lock measured 1.10-1.17 against the white card — barely above the neutral
       canvas pill's 1.05, so the colour was carried almost entirely by the numeral.

       WHY FIVE DIFFERENT ALPHAS AND NOT ONE. Equal transparency does NOT give equal visibility:
       the five hues have very different luminance, so at a flat 35% red measures 1.60 while amber
       reaches only 1.31 — a false hierarchy where the loudest colour is simply the darkest one.
       Each alpha below is the value that lands its own hue on contrast ~1.35, i.e. the bottom of
       the 1.34-1.47 band the FUND-doc (§L4/L15) identified as the strong-but-not-shouting range.
       MEASURED in the browser at 1021px, light: overdue 1.36 · poke 1.35 · followup 1.36 ·
       done 1.36 · unread 1.35. All under 40%, so these are still tints — guideline 21's
       "never saturated" holds.

       Recalculate rather than eyeball if a hue changes: alpha such that
       contrast(alpha*hue + (1-alpha)*card, card) == 1.35. */
    --tone-overdue-fill:  color-mix(in srgb, var(--color-error) 23%, transparent);
    --tone-unread-fill:   color-mix(in srgb, var(--color-warning) 39%, transparent);
    --tone-followup-fill: color-mix(in srgb, var(--color-info) 33%, transparent);
    --tone-poke-fill:     color-mix(in srgb, var(--color-attention) 24%, transparent);
    --tone-done-fill:     color-mix(in srgb, var(--color-success) 36%, transparent);

    /* === File-type categorical accents ===
       One canonical colour per file category, shared by chat file chips, the form's
       files/attachments blocks and the media panel (they disagreed before the lock —
       chat said image=pink/video=purple, the form said the opposite; the form wins).
       Recipe: icon/text = var(--ft-x), chip fill = bg-[var(--ft-x)]/12. */
    --ft-image:   #9333ea;
    --ft-video:   #db2777;
    --ft-audio:   #d97706;
    --ft-pdf:     #dc2626;
    --ft-word:    #2563eb;
    --ft-excel:   #16a34a;
    --ft-ppt:     #ea580c;
    --ft-archive: #57534e;
    --ft-code:    #4f46e5;
    --ft-file:    #7c3aed;

    /* Avatar initials */
    --avatar-bg-strength: 20%;
    --avatar-text-mix: 0%;

    /* Surface & background (4-level system) */
    --color-bg-shell: #ffffff;              /* Nav & sidebar */
    --color-bg-canvas: var(--palette-gray-50);   /* Main content area */
    --color-bg-card: #ffffff;               /* Cards & panels */
    --color-bg-card-hover: var(--palette-gray-100); /* Card hover state */
    
    /* Legacy aliases (for backward compatibility) */
    --color-bg: var(--color-bg-shell);
    --color-bg-subtle: var(--color-bg-canvas);
    --color-bg-muted: var(--color-bg-card-hover);

    /* Text */
    --color-text: var(--palette-gray-900);
    --color-text-muted: var(--palette-gray-600);
    --color-text-subtle: var(--palette-gray-400);

    /* Borders */
    --color-border: var(--palette-gray-200);
    --color-border-muted: var(--palette-gray-100);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* === Right-panel widths ===
       The right-side overlays (Notifications / Activity Log / Announcements /
       How-it-works) use a couple of recurring widths. Promoting from magic numbers so
       the layout math is honest and panel-to-panel transitions stay consistent. */
    --w-panel-narrow: 20rem; /* 320px — Notifications empty, Activity Log */
    --w-panel-wide:   24rem; /* 384px — Notifications populated            */

    /* === DeptNav width ===
       Currently the secondary sidebar uses inline lg:w-72 (288px). The redesigned
       DeptNav adds a header strip and pinned footer; standardising the width via
       token avoids ad-hoc adjustments per surface. */
    --w-deptnav: 16.5rem; /* 264px */
}

/* ===== Dark theme (Tailwind-compatible .dark class) ===== */
:root.dark,
.dark {
    color-scheme: dark;

    /* Semantic colors */
    --color-primary: var(--palette-primary-400);
    --color-primary-hover: var(--palette-primary-300);
    --color-primary-light: var(--palette-primary-900);
    --color-primary-dark: var(--palette-primary-500);

    --color-accent: var(--palette-accent-500);
    --color-accent-hover: var(--palette-accent-600);

    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-error: #f87171;
    --color-info: #22d3ee;

    /* Ink variants (see light block) — the -400 shades in dark */
    --color-success-ink: #4ade80;
    --color-warning-ink: #fbbf24;
    --color-error-ink: #f87171;
    --color-info-ink: #22d3ee;
    --color-attention-ink: #c084fc;

    /* Status-group badge fills — DARK. Kept at a flat 12%: MEASURED on screen, the dark card is
       slate-800 and all five hues are their light -400 variants, so a low tint already separates
       them (6 of 6 unique fills). Only LIGHT was raised. If dark ever needs the same treatment,
       recalculate per hue against the dark card the same way — do not reuse the light numbers. */
    --tone-overdue-fill:  color-mix(in srgb, var(--color-error) 12%, transparent);
    --tone-unread-fill:   color-mix(in srgb, var(--color-warning) 12%, transparent);
    --tone-followup-fill: color-mix(in srgb, var(--color-info) 12%, transparent);
    --tone-poke-fill:     color-mix(in srgb, var(--color-attention) 12%, transparent);
    --tone-done-fill:     color-mix(in srgb, var(--color-success) 12%, transparent);

    /* File-type accents — the -400 shades in dark */
    --ft-image:   #c084fc;
    --ft-video:   #f472b6;
    --ft-audio:   #fbbf24;
    --ft-pdf:     #f87171;
    --ft-word:    #60a5fa;
    --ft-excel:   #4ade80;
    --ft-ppt:     #fb923c;
    --ft-archive: #a8a29e;
    --ft-code:    #818cf8;
    --ft-file:    #a78bfa;

    /* Avatar initials */
    --avatar-bg-strength: 30%;
    --avatar-text-mix: 50%;

    /* Surface & background (4-level system with Slate) */
    --color-bg-shell: var(--palette-slate-950);      /* Nav & sidebar - deepest */
    --color-bg-canvas: var(--palette-slate-900);     /* Main content area */
    --color-bg-card: var(--palette-slate-800);       /* Cards & panels */
    --color-bg-card-hover: var(--palette-slate-700); /* Card hover state */

    /* Legacy aliases (for backward compatibility) */
    --color-bg: var(--color-bg-canvas);
    --color-bg-subtle: var(--color-bg-card);
    --color-bg-muted: var(--color-bg-card-hover);

    /* Text (using Slate) */
    --color-text: var(--palette-slate-100);
    --color-text-muted: var(--palette-slate-400);
    --color-text-subtle: var(--palette-slate-500);

    /* Borders (using Slate) */
    --color-border: var(--palette-slate-700);
    --color-border-muted: var(--palette-slate-800);

    /* Shadows (more prominent in dark mode) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* ===== Auto dark mode (respects OS preference when no .dark class is set) ===== */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        color-scheme: dark;

        --color-primary: var(--palette-primary-400);
        --color-primary-hover: var(--palette-primary-300);
        --color-primary-light: var(--palette-primary-900);
        --color-primary-dark: var(--palette-primary-500);

        --color-accent: var(--palette-accent-500);
        --color-accent-hover: var(--palette-accent-600);

        --color-success: #4ade80;
        --color-warning: #fbbf24;
        --color-error: #f87171;
        --color-info: #22d3ee;

        /* Ink variants (see light block) — the -400 shades in dark */
        --color-success-ink: #4ade80;
        --color-warning-ink: #fbbf24;
        --color-error-ink: #f87171;
        --color-info-ink: #22d3ee;
        --color-attention-ink: #c084fc;

        /* Status-group badge fills — DARK via system preference. Must mirror the .dark block
           above: a token defined in only one of the two dark paths is a phantom in the other,
           and a phantom renders transparent with no warning at all. */
        --tone-overdue-fill:  color-mix(in srgb, var(--color-error) 12%, transparent);
        --tone-unread-fill:   color-mix(in srgb, var(--color-warning) 12%, transparent);
        --tone-followup-fill: color-mix(in srgb, var(--color-info) 12%, transparent);
        --tone-poke-fill:     color-mix(in srgb, var(--color-attention) 12%, transparent);
        --tone-done-fill:     color-mix(in srgb, var(--color-success) 12%, transparent);

        /* File-type accents — the -400 shades in dark */
        --ft-image:   #c084fc;
        --ft-video:   #f472b6;
        --ft-audio:   #fbbf24;
        --ft-pdf:     #f87171;
        --ft-word:    #60a5fa;
        --ft-excel:   #4ade80;
        --ft-ppt:     #fb923c;
        --ft-archive: #a8a29e;
        --ft-code:    #818cf8;
        --ft-file:    #a78bfa;

        /* Avatar initials */
        --avatar-bg-strength: 30%;
        --avatar-text-mix: 50%;

        /* Surface & background (4-level system with Slate) */
        --color-bg-shell: var(--palette-slate-950);
        --color-bg-canvas: var(--palette-slate-900);
        --color-bg-card: var(--palette-slate-800);
        --color-bg-card-hover: var(--palette-slate-700);
        
        --color-bg: var(--color-bg-canvas);
        --color-bg-subtle: var(--color-bg-card);
        --color-bg-muted: var(--color-bg-card-hover);

        --color-text: var(--palette-slate-100);
        --color-text-muted: var(--palette-slate-400);
        --color-text-subtle: var(--palette-slate-500);

        --color-border: var(--palette-slate-700);
        --color-border-muted: var(--palette-slate-800);

        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    }
}

/* ===== Base styles ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* Extended transitions for smooth theme switching */
html, body, div, nav, aside, header, footer, main, section,
article, button, input, textarea, select, a, span, p, h1, h2, h3, h4, h5, h6 {
    transition: 
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== Glassmorphism Utility ===== */

/* 
 * Single flexible glass class with CSS variable overrides
 * Usage: 
 *   .glass                                    → default (80% opacity, 12px blur)
 *   .glass style="--glass-opacity: 5%"        → heavy/solid variant
 *   .glass style="--glass-blur: 16px"         → stronger blur
 *   .glass style="--glass-opacity: 10%; --glass-blur: 20px" → custom
 */
.glass {
    --glass-opacity: 20%;
    --glass-blur: 12px;
    background-color: color-mix(in srgb, var(--color-bg-card, var(--color-bg)), transparent var(--glass-opacity));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ===== Logo Utility ===== */
/*
 * Purple wordmark in light mode, white in dark mode.
 * Usage: <img src="…-Purple.svg" class="logo-brand" />  — the PURPLE file is the one in the markup.
 *
 * THIS USED TO BE A FILTER CHAIN AND IT SHIPPED THE WRONG COLOUR — S/N 478. The logo was a white SVG
 * recoloured by:
 *     filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(7400%)
 *             hue-rotate(267deg) brightness(87%) contrast(110%);
 * Seven operations, tuned by trial and error until the result looked like #831CEF in one browser. That is
 * a COMPUTATION, not a colour, and every engine computes it slightly differently — on an iPhone, where the
 * work happens in a wide-gamut (Display P3) space, it lands visibly PINK. Found on a real device on
 * 2026-08-14, the first time the app rendered properly on iOS; it had been wrong the whole time and only
 * the phone showed it.
 *
 * So the colour is now DECLARED rather than derived: a purple twin of each SVG sits beside the white one,
 * and the theme picks a file. No filter, no engine-dependent maths, exact brand colour everywhere.
 *
 * `content:` swaps the image without touching the markup — it is supported on replaced elements in every
 * engine this app runs in. The PURPLE file is what the markup points at, so if `content` were ever
 * ignored the logo stays purple: wrong against a dark header, but VISIBLE. The white file as the fallback
 * would be invisible on the light background, which is the worse failure.
 */
.dark .logo-brand,
:root.dark .logo-brand {
    content: url("../images/Giki-Logo-White.svg");
}

/* The collapsed-sidebar mark is the G ALONE, and it needs its own rule — swapping it through
   .logo-brand would put the full wordmark into a square slot the moment the theme went dark. */
.dark .logo-brand-g,
:root.dark .logo-brand-g {
    content: url("../images/Giki-Logo-G-only.svg");
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) .logo-brand {
        content: url("../images/Giki-Logo-White.svg");
    }

    :root:not(.light) .logo-brand-g {
        content: url("../images/Giki-Logo-G-only.svg");
    }
}