/* ============================================================
   PIIA — Design Tokens: Color & Type
   Personal document management + AI. Calm, trustworthy, personal.
   Load fonts via Google Fonts (see fonts/README.md) then import this.
   ============================================================ */

/* ---- Fonts (loaded from Google Fonts CDN; see fonts/README.md) ---- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ========== BRAND BLUE (derived from the PIIA folder mark) ========== */
  --blue-50:  #EAF3FF;   /* lightest tint, sampled from logo highlight */
  --blue-100: #D6E6FE;
  --blue-200: #AECCFC;
  --blue-300: #7CADF9;
  --blue-400: #4A8FF4;
  --blue-500: #1993FB;   /* bright accent (logo top band) */
  --blue-600: #1366E0;   /* PRIMARY — core brand blue (logo body) */
  --blue-700: #0F50BE;
  --blue-800: #0B39AB;   /* deep (logo base of gradient) */
  --blue-900: #0A2E86;

  /* Brand aliases */
  --brand:        var(--blue-600);
  --brand-strong: var(--blue-800);
  --brand-bright: var(--blue-500);
  /* Signature gradient — matches the logo (135deg, bright -> deep) */
  --brand-gradient: linear-gradient(140deg, #1993FB 0%, #1368DA 48%, #0B39AB 100%); /* @kind color */
  --brand-gradient-soft: linear-gradient(140deg, #EAF3FF 0%, #D6E6FE 100%); /* @kind color */

  /* ========== NEUTRALS (cool slate — clean & document-like) ========== */
  --ink-900: #0E1A2B;   /* primary text / headlines */
  --ink-800: #1C2A3D;
  --ink-700: #2C3B50;   /* strong body */
  --ink-600: #44546B;
  --ink-500: #5E6E84;   /* secondary text */
  --ink-400: #8190A2;   /* tertiary / muted / placeholder */
  --ink-300: #AEBAC8;   /* disabled text, icons */
  --line-300: #CBD4DF;  /* strong border */
  --line-200: #E2E8EF;  /* default border / divider */
  --line-100: #EEF2F6;  /* hairline / subtle divider */

  /* Surfaces */
  --surface:        #F6F8FB;  /* app background — faint cool paper */
  --surface-sunken: #EFF3F8;  /* recessed wells, inputs at rest */
  --surface-raised: #FFFFFF;  /* cards, sheets, panels */
  --surface-blue:   #F2F7FF;  /* subtle brand-tinted surface */
  --overlay-scrim:  rgba(14, 26, 43, 0.46);  /* modal backdrop */

  /* Frosted chrome (top bar / tab bar). Theme-aware. */
  --glass-bg:        rgba(246, 248, 251, 0.82);
  --glass-bg-raised: rgba(255, 255, 255, 0.82);
  --glass-border:    var(--line-200);

  /* ========== SEMANTIC ========== */
  --success:     #15936A;
  --success-bg:  #E3F4EC;
  --success-fg:  #0C5B42;
  --warning:     #C9871A;
  --warning-bg:  #FBF0DC;
  --warning-fg:  #7A5208;
  --danger:      #D2402F;
  --danger-bg:   #FBE6E2;
  --danger-fg:   #8E2519;
  --info:        var(--blue-600);
  --info-bg:     var(--blue-50);
  --info-fg:     var(--blue-800);

  /* ========== DOCUMENT CATEGORY ACCENTS (folders, tags) ==========
     Muted, calm tints for color-coding personal document types. */
  --cat-finance:  #2F7DD1;  --cat-finance-bg:  #E7F0FB;  /* financial docs     */
  --cat-legal:    #7A5CC9;  --cat-legal-bg:    #EEE9FA;  /* contracts, legal   */
  --cat-identity: #C9871A;  --cat-identity-bg: #FBF0DC;  /* IDs, passports     */
  --cat-property: #C2575A;  --cat-property-bg: #FBE7E8;  /* housing, property  */
  --cat-medical:  #1F9E96;  --cat-medical-bg:  #E0F4F2;  /* medical records    */
  --cat-employment:#15936A; --cat-employment-bg:#E3F4EC; /* payslips, work     */
  --cat-general:  #6B7A8D;  --cat-general-bg:  #EEF2F6;  /* unclassified       */
  /* legacy aliases — kept for existing references */
  --cat-personal: var(--cat-identity); --cat-personal-bg: var(--cat-identity-bg);
  --cat-tax:      var(--cat-employment); --cat-tax-bg:   var(--cat-employment-bg);
  --cat-health:   var(--cat-medical);  --cat-health-bg:  var(--cat-medical-bg);

  /* ========== TYPOGRAPHY ========== */
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Type scale (1.20 minor-third, rem on 16px base) */
  --text-xs:   0.75rem;   /* 12 — captions, meta, mono labels   */
  --text-sm:   0.875rem;  /* 14 — secondary UI text             */
  --text-base: 1rem;      /* 16 — body                          */
  --text-md:   1.125rem;  /* 18 — lead body                     */
  --text-lg:   1.375rem;  /* 22 — card titles / section labels  */
  --text-xl:   1.75rem;   /* 28 — H3                            */
  --text-2xl:  2.25rem;   /* 36 — H2                            */
  --text-3xl:  2.875rem;  /* 46 — H1                            */
  --text-4xl:  3.75rem;   /* 60 — display                       */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* eyebrows / overline labels */

  /* ========== RADII ==========
     Pick by ROLE from this ladder — never type a one-off value.
     Consistency rule (concentric corners): when one rounded box nests inside
     another with padding P,  inner-radius = outer-radius − P.  Keep the gap
     between curves constant and the eye reads it as deliberate. Never let a
     radius exceed ~half the shortest side unless you mean a full pill. */
  --radius-xs:   6px;    /* tags, small chips           */
  --radius-sm:   10px;   /* buttons, inputs             */
  --radius-md:   14px;   /* cards, list rows            */
  --radius-lg:   20px;   /* sheets, large cards         */
  --radius-xl:   28px;   /* hero panels, bottom sheets  */
  --radius-full: 999px;  /* pills, avatars, FAB         */

  /* ========== SPACING (4px base) ========== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ========== SHADOWS (soft, low, cool-tinted — never harsh) ========== */
  --shadow-xs: 0 1px 2px rgba(14, 26, 43, 0.05);
  --shadow-sm: 0 1px 3px rgba(14, 26, 43, 0.06), 0 1px 2px rgba(14, 26, 43, 0.04);
  --shadow-md: 0 4px 14px rgba(14, 26, 43, 0.07), 0 2px 4px rgba(14, 26, 43, 0.04);
  --shadow-lg: 0 12px 30px rgba(14, 26, 43, 0.10), 0 4px 8px rgba(14, 26, 43, 0.05);
  --shadow-xl: 0 24px 60px rgba(14, 26, 43, 0.16), 0 8px 18px rgba(14, 26, 43, 0.07);
  --shadow-blue: 0 8px 22px rgba(19, 102, 224, 0.28);   /* brand button lift */
  --ring-focus: 0 0 0 3px rgba(19, 102, 224, 0.28);     /* keyboard focus     */

  /* Motion — durations + easings (intentionally uncategorized) */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ============================================================
   DARK THEME — calm, professional, low-chroma. Cool slate, never pure
   black, text never pure white. Set <html data-theme="dark"> to opt in;
   data-theme="light" forces light. With no attribute, OS preference wins
   (see the @media block below, which mirrors these values).
   ============================================================ */
[data-theme="dark"] {
  /* Surfaces */
  --surface:        #0E1824;
  --surface-sunken: #0A121C;
  --surface-raised: #18222F;
  --surface-blue:   #122237;
  --overlay-scrim:  rgba(4, 9, 15, 0.62);
  --glass-bg:        rgba(14, 24, 36, 0.82);
  --glass-bg-raised: rgba(24, 34, 47, 0.82);

  /* Text / neutrals (900 = lightest in dark) */
  --ink-900: #EDF2F8;
  --ink-800: #DBE3EC;
  --ink-700: #C2CCD8;
  --ink-600: #A2AEBE;
  --ink-500: #8593A4;
  --ink-400: #6A7888;
  --ink-300: #4C596A;
  --line-300: #38465A;
  --line-200: #273340;
  --line-100: #1E2937;

  /* Brand — brightened a step so accents/links stay legible on dark */
  --blue-600: #3B82F0;
  --blue-700: #5C9BF6;
  --brand: #3B82F0;

  /* Semantic */
  --success: #3FBE93; --success-bg: rgba(21,147,106,0.18); --success-fg: #88DBBC;
  --warning: #E0A94B; --warning-bg: rgba(201,135,26,0.20); --warning-fg: #EBC382;
  --danger:  #E8705F; --danger-bg:  rgba(210,64,47,0.20);  --danger-fg:  #F1A89F;
  --info: var(--blue-600); --info-bg: rgba(59,130,240,0.18); --info-fg: #A6C7F8;

  /* Document categories (brighter accent + translucent dark tint) */
  --cat-finance:  #5AA0E6; --cat-finance-bg:  rgba(47,125,209,0.18);
  --cat-legal:    #A98DEB; --cat-legal-bg:    rgba(122,92,201,0.22);
  --cat-identity: #E0A94B; --cat-identity-bg: rgba(201,135,26,0.18);
  --cat-property: #E0888B; --cat-property-bg: rgba(194,87,90,0.20);
  --cat-medical:  #45C2B9; --cat-medical-bg:  rgba(31,158,150,0.18);
  --cat-employment:#3FBE93;--cat-employment-bg:rgba(21,147,106,0.18);
  --cat-general:  #9BAABC; --cat-general-bg:  rgba(107,122,141,0.18);
  --cat-personal: var(--cat-identity); --cat-personal-bg: var(--cat-identity-bg);
  --cat-tax:      var(--cat-employment); --cat-tax-bg:   var(--cat-employment-bg);
  --cat-health:   var(--cat-medical);  --cat-health-bg:  var(--cat-medical-bg);

  /* Shadows lean on darkness + a hairline; raised surfaces are lighter than bg */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.30);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.58), 0 4px 10px rgba(0,0,0,0.40);
  --shadow-xl: 0 26px 64px rgba(0,0,0,0.66), 0 8px 20px rgba(0,0,0,0.45);
  --shadow-blue: 0 8px 22px rgba(19,102,224,0.45);
  --ring-focus: 0 0 0 3px rgba(59,130,240,0.40);
}

/* Follow OS dark preference when no explicit data-theme is set.
   Plain :root keeps these registered as design-system tokens; the explicit
   [data-theme="light"] block below re-asserts light LAST in source order, so a
   consumer that forces light on a dark-OS device still gets light.
   (Mirrors the [data-theme="dark"] values above.) */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:#0E1824; --surface-sunken:#0A121C; --surface-raised:#18222F;
    --surface-blue:#122237; --overlay-scrim:rgba(4,9,15,0.62);
    --glass-bg:rgba(14,24,36,0.82); --glass-bg-raised:rgba(24,34,47,0.82);
    --ink-900:#EDF2F8; --ink-800:#DBE3EC; --ink-700:#C2CCD8; --ink-600:#A2AEBE;
    --ink-500:#8593A4; --ink-400:#6A7888; --ink-300:#4C596A;
    --line-300:#38465A; --line-200:#273340; --line-100:#1E2937;
    --blue-600:#3B82F0; --blue-700:#5C9BF6; --brand:#3B82F0;
    --success:#3FBE93; --success-bg:rgba(21,147,106,0.18); --success-fg:#88DBBC;
    --warning:#E0A94B; --warning-bg:rgba(201,135,26,0.20); --warning-fg:#EBC382;
    --danger:#E8705F; --danger-bg:rgba(210,64,47,0.20); --danger-fg:#F1A89F;
    --info:var(--blue-600); --info-bg:rgba(59,130,240,0.18); --info-fg:#A6C7F8;
    --cat-finance:#5AA0E6; --cat-finance-bg:rgba(47,125,209,0.18);
    --cat-tax:#3FBE93; --cat-tax-bg:rgba(21,147,106,0.18);
    --cat-legal:#A98DEB; --cat-legal-bg:rgba(122,92,201,0.22);
    --cat-personal:#E0A94B; --cat-personal-bg:rgba(201,135,26,0.18);
    --cat-property:#E0888B; --cat-property-bg:rgba(194,87,90,0.20);
    --cat-health:#45C2B9; --cat-health-bg:rgba(31,158,150,0.18);
    --shadow-xs:0 1px 2px rgba(0,0,0,0.40);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.30);
    --shadow-md:0 4px 14px rgba(0,0,0,0.50),0 2px 4px rgba(0,0,0,0.30);
    --shadow-lg:0 14px 34px rgba(0,0,0,0.58),0 4px 10px rgba(0,0,0,0.40);
    --shadow-xl:0 26px 64px rgba(0,0,0,0.66),0 8px 20px rgba(0,0,0,0.45);
    --shadow-blue:0 8px 22px rgba(19,102,224,0.45);
    --ring-focus:0 0 0 3px rgba(59,130,240,0.40);
  }
}

/* Explicit light — wins over the OS auto-dark above by coming last in source
   order (equal specificity). Mirrors the :root light defaults. */
[data-theme="light"] {
  --surface:#F6F8FB; --surface-sunken:#EFF3F8; --surface-raised:#FFFFFF;
  --surface-blue:#F2F7FF; --overlay-scrim:rgba(14,26,43,0.46);
  --glass-bg:rgba(246,248,251,0.82); --glass-bg-raised:rgba(255,255,255,0.82);
  --ink-900:#0E1A2B; --ink-800:#1C2A3D; --ink-700:#2C3B50; --ink-600:#44546B;
  --ink-500:#5E6E84; --ink-400:#8190A2; --ink-300:#AEBAC8;
  --line-300:#CBD4DF; --line-200:#E2E8EF; --line-100:#EEF2F6;
  --blue-600:#1366E0; --blue-700:#0F50BE; --brand:#1366E0;
  --success:#15936A; --success-bg:#E3F4EC; --success-fg:#0C5B42;
  --warning:#C9871A; --warning-bg:#FBF0DC; --warning-fg:#7A5208;
  --danger:#D2402F; --danger-bg:#FBE6E2; --danger-fg:#8E2519;
  --info:var(--blue-600); --info-bg:#EAF3FF; --info-fg:#0B39AB;
  --cat-finance:#2F7DD1; --cat-finance-bg:#E7F0FB;
  --cat-legal:#7A5CC9; --cat-legal-bg:#EEE9FA;
  --cat-identity:#C9871A; --cat-identity-bg:#FBF0DC;
  --cat-property:#C2575A; --cat-property-bg:#FBE7E8;
  --cat-medical:#1F9E96; --cat-medical-bg:#E0F4F2;
  --cat-employment:#15936A; --cat-employment-bg:#E3F4EC;
  --cat-general:#6B7A8D; --cat-general-bg:#EEF2F6;
  --cat-personal:var(--cat-identity); --cat-personal-bg:var(--cat-identity-bg);
  --cat-tax:var(--cat-employment); --cat-tax-bg:var(--cat-employment-bg);
  --cat-health:var(--cat-medical); --cat-health-bg:var(--cat-medical-bg);
  --shadow-xs:0 1px 2px rgba(14,26,43,0.05);
  --shadow-sm:0 1px 3px rgba(14,26,43,0.06),0 1px 2px rgba(14,26,43,0.04);
  --shadow-md:0 4px 14px rgba(14,26,43,0.07),0 2px 4px rgba(14,26,43,0.04);
  --shadow-lg:0 12px 30px rgba(14,26,43,0.10),0 4px 8px rgba(14,26,43,0.05);
  --shadow-xl:0 24px 60px rgba(14,26,43,0.16),0 8px 18px rgba(14,26,43,0.07);
  --shadow-blue:0 8px 22px rgba(19,102,224,0.28);
  --ring-focus:0 0 0 3px rgba(19,102,224,0.28);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.piia-display {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-4xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); color: var(--ink-900);
}
h1, .piia-h1 {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); color: var(--ink-900);
}
h2, .piia-h2 {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug); color: var(--ink-900);
}
h3, .piia-h3 {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug); color: var(--ink-900);
}
.piia-title {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink-900);
}
.piia-lead {
  font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ink-600);
}
p, .piia-body {
  font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-700);
}
.piia-secondary {
  font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-500);
}
.piia-caption {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--ink-400);
}
.piia-eyebrow {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--brand);
}
.piia-mono {
  font-family: var(--font-mono); font-weight: var(--weight-regular);
  font-size: var(--text-sm); letter-spacing: 0; color: var(--ink-500);
  font-feature-settings: 'tnum' 1;   /* tabular figures for dates, sizes, amounts */
}

/* ============================================================
   MOTION — shared keyframes (available wherever this file is linked)
   ============================================================ */
@keyframes piia-spin { to { transform: rotate(360deg); } }
.piia-spin { display: inline-block; animation: piia-spin 0.8s linear infinite; }

@keyframes piia-shimmer { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.piia-shimmer { animation: piia-shimmer 1.5s ease-in-out infinite; }

@keyframes piia-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.piia-fade-up { animation: piia-fade-up var(--dur-slow) var(--ease-standard) both; }

/* PIIA loading rings — the AccountProvisioning / "PIIA is crafting a message" loader */
@keyframes auth-pulse { 0%, 100% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 1; } }
.auth-pulse { animation: auth-pulse 1.9s ease-in-out infinite; }
.auth-pulse-d { animation-delay: 0.32s; }

/* Auth biometric scan sweep */
@keyframes auth-scan { from { transform: translateY(-40%); } to { transform: translateY(40%); } }
.auth-scan { animation: auth-scan 1.8s var(--ease-standard) infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .piia-spin, .piia-shimmer, .piia-fade-up, .auth-pulse, .auth-scan { animation: none; }
}