/* =========================================================
   Clarity UI — Atenea Design System
   Tokens: color, typography, spacing, radius, shadow, motion
   Built on iOS/Apple Human Interface Guidelines,
   colored with Atenea's brand identity (2025).
   Deep Ocean accent override applied per CLAUDE.md.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:"Neue Haas Display";font-weight:100;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayXXThin.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:100;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayXXThinItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:200;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayXThin.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:200;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayXThinItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:250;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayThin.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:250;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayThinItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:300;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayLight.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:300;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayLightItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:400;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayRoman.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:400;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayRomanItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:500;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayMediu.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:500;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayMediumItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:700;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayBold.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:700;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayBoldItalic.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:900;font-style:normal;font-display:swap;
  src:url("/fonts/NeueHaasDisplayBlack.ttf") format("truetype")}
@font-face{font-family:"Neue Haas Display";font-weight:900;font-style:italic;font-display:swap;
  src:url("/fonts/NeueHaasDisplayBlackItalic.ttf") format("truetype")}

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ============ Brand (Atenea 2025) ============ */
  --brand-rose:       #9A6269;
  --brand-rose-light: #B66D6D;
  --brand-peach:      #C38490;
  --brand-cream:      #F9ECE1;
  --brand-wine:       #EFF6FF;
  --brand-blush:      #E8CDD0;
  --brand-taupe:      #956A59;
  --brand-ink:        #3A3A3A;
  --brand-steel:      #8C8C8C;
  --brand-bone:       #F2EFE4;

  /* ============ Clarity Accent — Deep Ocean override ============ */
  --accent:       #2563EB;
  --accent-600:   #2159d4;
  --accent-400:   #5182ef;
  --accent-100:   #d3e0fb;
  --accent-50:    #eef3fd;
  --accent-fg:    #FFFFFF;
  --app-gradient: linear-gradient(135deg, #2563EB, #60A5FA);

  /* ============ iOS System Colors (Light) ============ */
  --sys-blue:     #007AFF;
  --sys-green:    #34C759;
  --sys-indigo:   #5856D6;
  --sys-orange:   #FF9500;
  --sys-pink:     #FF2D55;
  --sys-purple:   #AF52DE;
  --sys-red:      #FF3B30;
  --sys-teal:     #30B0C7;
  --sys-yellow:   #FFCC00;
  --sys-cyan:     #32ADE6;
  --sys-brown:    #A2845E;
  --sys-mint:     #00C7BE;

  /* ============ Semantic ============ */
  --success:      var(--sys-green);
  --warning:      var(--sys-orange);
  --danger:       var(--sys-red);
  --info:         var(--sys-blue);

  /* ============ Neutrals — iOS Gray Scale ============ */
  --gray-1:  #8E8E93;
  --gray-2:  #AEAEB2;
  --gray-3:  #C7C7CC;
  --gray-4:  #D1D1D6;
  --gray-5:  #E5E5EA;
  --gray-6:  #F2F2F7;

  /* ============ Surfaces (Light) ============ */
  --bg:            #F2F2F7;
  --bg-elevated:   #FFFFFF;
  --bg-grouped:    #FFFFFF;
  --bg-sidebar:    #F9F9FB;
  --bg-hover:      rgba(0,0,0,0.04);
  --bg-press:      rgba(0,0,0,0.08);
  --bg-tint:       rgba(37,99,235,0.10);

  /* ============ Foreground / Text ============ */
  --fg-1:      rgba(0,0,0,0.88);
  --fg-2:      rgba(60,60,67,0.85);
  --fg-3:      rgba(60,60,67,0.60);
  --fg-4:      rgba(60,60,67,0.30);
  --fg-inverse:#FFFFFF;

  /* ============ Separators & Borders ============ */
  --sep:       rgba(60,60,67,0.18);
  --sep-opaque:#C6C6C8;
  --border:    #E5E5EA;
  --border-strong: #D1D1D6;

  /* ============ Focus Ring ============ */
  --ring: 0 0 0 4px rgba(37,99,235,0.25);

  /* ============ Spacing (4px base) ============ */
  --sp-0:   0px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   48px;
  --sp-10:  64px;

  /* ============ Radius ============ */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ============ Shadow / Elevation ============ */
  --shadow-hairline: 0 0 0 0.5px rgba(0,0,0,0.08);
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.06);
  --shadow-pop: 0 20px 48px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.06);

  /* ============ Blur / Materials ============ */
  --blur-thin:  saturate(180%) blur(20px);
  --blur-thick: saturate(180%) blur(40px);
  --mat-thin:   rgba(255,255,255,0.72);
  --mat-thick:  rgba(255,255,255,0.85);
  --mat-toolbar: rgba(249,249,251,0.80);

  /* ============ Motion ============ */
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;

  /* ============ Type Scale ============ */
  --font-sans: "Neue Haas Display", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", "Arial", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --text-largeTitle: 34px;
  --text-title1:     28px;
  --text-title2:     22px;
  --text-title3:     20px;
  --text-headline:   17px;
  --text-body:       17px;
  --text-callout:    16px;
  --text-subhead:    15px;
  --text-footnote:   13px;
  --text-caption1:   12px;
  --text-caption2:   11px;

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;

  --tr-tight:  -0.02em;
  --tr-normal:  0em;
  --tr-wide:    0.02em;
  --tr-mono:    0.02em;
}

/* ============ Dark Mode ============ */
[data-theme="dark"] {
  --bg:            #141112;
  --bg-elevated:   #201D1E;
  --bg-grouped:    #201D1E;
  --bg-sidebar:    #0E0C0D;
  --bg-hover:      rgba(255,255,255,0.05);
  --bg-press:      rgba(255,255,255,0.09);
  --bg-tint:       color-mix(in srgb, var(--accent) 22%, transparent);

  --fg-1:      rgba(244,238,232,0.94);
  --fg-2:      rgba(244,238,232,0.72);
  --fg-3:      rgba(244,238,232,0.48);
  --fg-4:      rgba(244,238,232,0.24);
  --fg-inverse:#181617;

  --sep:       rgba(255,255,255,0.10);
  --sep-opaque:#2A2627;
  --border:    rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);

  --sys-blue:   #0A84FF;
  --sys-green:  #30D158;
  --sys-indigo: #5E5CE6;
  --sys-orange: #FF9F0A;
  --sys-pink:   #FF375F;
  --sys-purple: #BF5AF2;
  --sys-red:    #FF453A;
  --sys-teal:   #40CBE0;
  --sys-yellow: #FFD60A;

  --gray-1:  #8E8E93;
  --gray-2:  #636366;
  --gray-3:  #48484A;
  --gray-4:  #3A3A3C;
  --gray-5:  #2C2C2E;
  --gray-6:  #24211F;

  --mat-thin:    rgba(28,24,25,0.72);
  --mat-thick:   rgba(28,24,25,0.88);
  --mat-toolbar: rgba(20,17,18,0.78);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.04);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.05);
  --shadow-lg: 0 14px 36px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.06);
  --shadow-pop: 0 22px 52px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.08);
  --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}

[data-theme="dark"] .accent-deep-ocean,
[data-theme="dark"].accent-deep-ocean {
  --accent-100: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-50:  color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ============ Base Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============ Semantic Type Styles ============ */
.t-largeTitle { font: 600 var(--text-largeTitle)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tr-tight); color: var(--fg-1); }
.t-title1     { font: 600 var(--text-title1)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tr-tight); color: var(--fg-1); }
.t-title2     { font: 500 var(--text-title2)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.t-title3     { font: 500 var(--text-title3)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.t-headline   { font: 500 var(--text-headline)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.t-body       { font: 400 var(--text-body)/var(--lh-normal) var(--font-sans); color: var(--fg-1); }
.t-callout    { font: 400 var(--text-callout)/var(--lh-normal) var(--font-sans); color: var(--fg-1); }
.t-subhead    { font: 400 var(--text-subhead)/var(--lh-normal) var(--font-sans); color: var(--fg-2); }
.t-footnote   { font: 400 var(--text-footnote)/var(--lh-normal) var(--font-sans); color: var(--fg-2); }
.t-caption1   { font: 400 var(--text-caption1)/var(--lh-normal) var(--font-sans); color: var(--fg-3); }
.t-caption2   { font: 500 var(--text-caption2)/var(--lh-normal) var(--font-sans); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.t-mono       { font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--tr-mono); color: var(--fg-2); }
.t-section-label { font: 400 var(--text-footnote)/1 var(--font-sans); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--sp-4) var(--sp-2); }

/* ============ Primitive Components ============ */
.ios-card {
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ios-hairline { border-bottom: 0.5px solid var(--sep); }

/* Focus ring */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* ============ Clarity Utility Animations ============ */
@keyframes cc-fade-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cc-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.14); opacity: 0.55; }
}
@keyframes cc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.cc-rise   { animation: cc-fade-rise .48s var(--ease-out) both; }
.cc-rise-1 { animation-delay: .03s; }
.cc-rise-2 { animation-delay: .08s; }
.cc-rise-3 { animation-delay: .14s; }
.cc-rise-4 { animation-delay: .20s; }
.cc-rise-5 { animation-delay: .28s; }

.cc-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: var(--success); position: relative;
}
.cc-live::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  background: var(--success); opacity: .4;
  animation: cc-breathe 2.6s var(--ease-standard) infinite;
}

.cc-skeleton {
  background: linear-gradient(90deg,
    var(--gray-6) 0%,
    color-mix(in srgb, var(--fg-4) 20%, var(--gray-6)) 50%,
    var(--gray-6) 100%);
  background-size: 200% 100%;
  animation: cc-shimmer 2.4s linear infinite;
  border-radius: 6px;
}

.cc-hover {
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-2);
}
.cc-hover:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .cc-rise, .cc-live::after, .cc-skeleton, .cc-hover {
    animation: none !important; transition: none !important;
  }
}