/* ══════════════════════════════════════════════════════════
   OCEAN — DESIGN TOKENS
   Apple-clean. Light + dark. One ocean-blue accent. Liquid glass
   reserved for floating surfaces only. All colors via CSS vars.
══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand / accent ── */
  --accent:        #0A84FF;
  --accent-press:  #0060DF;
  --accent-soft:   rgba(10,132,255,.12);
  --accent-grad:   linear-gradient(135deg, #34C6FF 0%, #0A84FF 100%);

  /* semantic */
  --green:  #30D158;
  --amber:  #FF9F0A;
  --red:    #FF453A;
  --purple: #BF5AF2;
  --pink:   #FF375F;

  /* ── Light surfaces ── */
  --bg:            #F2F2F7;
  --bg-2:          #EBEBF0;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --elevated:      #FFFFFF;
  --hairline:      rgba(60,60,67,.12);
  --hairline-2:    rgba(60,60,67,.08);

  --text:          #1D1D1F;
  --text-2:        #55555A;
  --text-3:        #8A8A8E;
  --text-on-accent:#FFFFFF;

  /* glass (floating) */
  --glass-bg:      rgba(255,255,255,.72);
  --glass-brd:     rgba(255,255,255,.55);
  --glass-hi:      rgba(255,255,255,.9);
  --glass-blur:    saturate(180%) blur(22px);

  /* elevation */
  --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --sh-2: 0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  --sh-3: 0 12px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);
  --sh-glass: 0 8px 32px rgba(0,0,0,.14), inset 0 1px 0 var(--glass-hi);

  /* radii */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* type */
  --font-head: 'Cairo', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-body: 'Tajawal', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-num:  'SF Pro Display', -apple-system, 'Cairo', system-ui, sans-serif;

  /* motion */
  --spring: cubic-bezier(.22,1,.36,1);
  --ease:   cubic-bezier(.4,0,.2,1);
  --t-fast: .16s;
  --t:      .28s;
  --t-slow: .5s;

  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --accent:        #0A84FF;
  --accent-press:  #409CFF;
  --accent-soft:   rgba(10,132,255,.20);

  --bg:            #000000;
  --bg-2:          #0C0C0E;
  --surface:       #1C1C1E;
  --surface-2:     #232325;
  --elevated:      #2C2C2E;
  --hairline:      rgba(255,255,255,.12);
  --hairline-2:    rgba(255,255,255,.07);

  --text:          #F5F5F7;
  --text-2:        #AEAEB2;
  --text-3:        #7C7C80;

  --glass-bg:      rgba(28,28,30,.62);
  --glass-brd:     rgba(255,255,255,.14);
  --glass-hi:      rgba(255,255,255,.14);

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px rgba(0,0,0,.5);
  --sh-3: 0 12px 40px rgba(0,0,0,.6);
  --sh-glass: 0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-hi);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-press:#409CFF; --accent-soft:rgba(10,132,255,.20);
    --bg:#000; --bg-2:#0C0C0E; --surface:#1C1C1E; --surface-2:#232325; --elevated:#2C2C2E;
    --hairline:rgba(255,255,255,.12); --hairline-2:rgba(255,255,255,.07);
    --text:#F5F5F7; --text-2:#AEAEB2; --text-3:#7C7C80;
    --glass-bg:rgba(28,28,30,.62); --glass-brd:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.14);
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 16px rgba(0,0,0,.5); --sh-3:0 12px 40px rgba(0,0,0,.6);
    --sh-glass:0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-hi);
    color-scheme: dark;
  }
}