/* ==========================================================================
   GetFit design system v2 — Apple Fitness × Liquid Glass.

   The user's direction (2026-09-09, restated 2026-09-27): everything goes iOS.
   The newest iOS is glass chrome floating over content; the canonical
   premium fitness app on it is Apple Fitness — a black canvas, one vivid
   colour per domain, activity rings and big numbers. This file is the single
   source of every colour, type size, radius, material and curve. Components
   live in app/app.css; nothing there invents a value.

   Themes: every colour is defined ONCE with light-dark(), and the theme is
   chosen by `color-scheme` on the root — `light dark` follows the phone,
   [data-theme] forces one. Browsers without light-dark() get the dark values
   from the @supports block at the end, never invisible text.
   (The landing keeps a frozen v1 sheet, shared/landing-v1.css, until Phase 7.)
   ========================================================================== */

/* ───────── fonts: self-hosted. Google Fonts is unreliable from Iran. ───────── */
@font-face{font-family:"Estedad";src:url("../assets/fonts/Estedad-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+200C,U+FB50-FDFF,U+0020-007F,U+2010-2027}
@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/Vazirmatn-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+200C,U+FB50-FDFF,U+0020-007F,U+2010-2027}

/* ───────── reset ───────── */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
img{max-width:100%}

/* ───────── tokens ───────── */
:root{
  color-scheme:light dark;         /* follow the phone; [data-theme] pins one */

  /* ── surfaces: Apple's semantic palette, both appearances ── */
  --bg:        light-dark(#F2F2F7, #000000);   /* systemGroupedBackground   */
  --bg-2:      light-dark(#FFFFFF, #1C1C1E);   /* cells, cards              */
  --bg-3:      light-dark(#F2F2F7, #2C2C2E);   /* nested in a card          */
  --bg-elev:   light-dark(#FFFFFF, #242426);   /* sheets and menus over dim */
  --label:     light-dark(#000000, #FFFFFF);
  --label-2:   light-dark(rgba(60,60,67,.62), rgba(235,235,245,.62));
  --label-3:   light-dark(rgba(60,60,67,.36), rgba(235,235,245,.34));
  --label-4:   light-dark(rgba(60,60,67,.20), rgba(235,235,245,.18));
  --fill:      light-dark(rgba(120,120,128,.20), rgba(120,120,128,.36));
  --fill-2:    light-dark(rgba(120,120,128,.16), rgba(120,120,128,.32));
  --fill-3:    light-dark(rgba(118,118,128,.12), rgba(118,118,128,.24));
  --fill-4:    light-dark(rgba(116,116,128,.08), rgba(118,118,128,.18));
  --sep:       light-dark(rgba(60,60,67,.24), rgba(84,84,88,.60));
  --sep-opaque:light-dark(#C6C6C8, #38383A);
  --scrim:     light-dark(rgba(0,0,0,.28), rgba(0,0,0,.52));
  --shadow:    light-dark(rgba(0,0,0,.10), rgba(0,0,0,.45));

  /* ── the brand: the logo's electric blue → violet ── */
  --brand:     light-dark(#1F66F5, #4C8DFF);   /* tint: links, controls, focus */
  --brand-2:   light-dark(#7C4DF0, #A27CFF);   /* the violet end              */
  --brand-grad:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --on-brand:  #FFFFFF;

  /* ── domains: one vivid colour each, a gradient pair like an activity ring.
        Identity is never colour-alone — every ring and chip carries a label. ── */
  --c-train:   light-dark(#E0144C, #FF2D63);   --c-train-2: light-dark(#FF4F7B, #FF6E93);
  --c-food:    light-dark(#1FA84A, #3AE06A);   --c-food-2:  light-dark(#7ACB1F, #B8F24E);
  --c-water:   light-dark(#0A8FD1, #32C3FF);   --c-water-2: light-dark(#27B7E8, #7FE3FF);
  --c-streak:  light-dark(#E07000, #FF9F0A);   --c-streak-2:light-dark(#F5A300, #FFD60A);
  --c-body:    var(--brand);                   --c-body-2:  var(--brand-2);
  /* macros: three hues apart from each other and from the domain colours */
  --m-prot:    light-dark(#C2255C, #FF6B9A);   --m-carb:    light-dark(#A67400, #FFD60A);
  --m-fat:     light-dark(#8944AB, #D08CFF);
  /* a received chat bubble: opaque, so the tail drawn beneath it cannot show through */
  --bub-them:  light-dark(#E9E9EB, #26262A);

  /* ── status: reserved for meaning, never decoration ── */
  --good:      light-dark(#1E9E47, #32D74B);
  --warn:      light-dark(#C77700, #FFB340);
  --bad:       light-dark(#D70015, #FF453A);

  /* ── glass: the iOS 26 material. Opaque fallback under .noblur and where
        backdrop-filter is unsupported — see .glass in app.css ── */
  --glass:        light-dark(rgba(255,255,255,.62), rgba(34,34,38,.56));
  --glass-strong: light-dark(rgba(255,255,255,.80), rgba(30,30,34,.74));
  --glass-solid:  light-dark(#F9F9FB, #1E1E21);
  --glass-edge:   light-dark(rgba(0,0,0,.08), rgba(255,255,255,.12));
  --glass-shine:  light-dark(rgba(255,255,255,.95), rgba(255,255,255,.22));
  --glass-blur:   saturate(1.8) blur(22px);

  /* ── type: Estedad carries display and big figures (the brand's voice),
        the system face carries UI text (SF Arabic on Apple, Vazirmatn on
        Android via fallback). Persian leading, never tracking. ── */
  --font-ui:"Vazirmatn",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Tahoma,sans-serif;
  --font-display:"Estedad","Vazirmatn",-apple-system,system-ui,Tahoma,sans-serif;
  --font-num:"Vazirmatn",-apple-system,system-ui,Tahoma,sans-serif;
  --t-hero:40px;    /* summary numbers   */
  --t-large:32px;   /* large title       */
  --t-title1:26px;
  --t-title2:22px;
  --t-title3:19px;
  --t-headline:17px;
  --t-body:16px;
  --t-callout:15px;
  --t-sub:14px;
  --t-foot:13px;
  --t-cap:12px;
  --t-cap2:11px;

  /* ── shape: 4pt grid, continuous corners where the browser can draw them ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-sheet:34px; --r-pill:999px;
  --hair:.5px;
  --tap:44px;
  --gut:16px;
  --maxw:1180px;
  --tabbar-h:64px;

  /* ── motion: springs sampled from a damped oscillator (stiffness/damping)
        into CSS linear(). smooth = no overshoot (pushes, sheets);
        snappy = ~3% (controls); bouncy = ~18% (a ring closing, a badge). ── */
  --ease-smooth:linear(0,.0225,.0775,.1509,.2329,.317,.3988,.4757,.5464,.6102,.6669,.7167,.7602,.7977,.83,.8575,.8809,.9008,.9175,.9315,.9433,.9531,.9613,.9681,.9737,.9784,.9823,.9855,.9881,.9903,.9921,.9935,.9947,.9957,.9965,.9971,.9977,.9981,.9985,.9988,1);
  --ease-snappy:linear(0,.0181,.0653,.1325,.2121,.2983,.3862,.4725,.5546,.6308,.6999,.7614,.8152,.8614,.9004,.9327,.9589,.9798,.9959,1.008,1.0167,1.0226,1.0261,1.0278,1.0282,1.0274,1.026,1.024,1.0217,1.0192,1.0167,1.0143,1.012,1.0099,1.008,1.0064,1.0049,1.0036,1.0026,1.0017,1);
  --ease-bouncy:linear(0,.0612,.2127,.4102,.6174,.8074,.9633,1.0773,1.1486,1.1816,1.1838,1.1642,1.1314,1.0931,1.0554,1.0225,.9967,.979,.9689,.9654,.967,.9719,.9786,.9857,.9925,.998,1.0022,1.0049,1.0062,1.0064,1.0058,1.0047,1.0034,1.0021,1.0009,1,.9993,.999,.9988,.9988,1);
  --ease-ios:cubic-bezier(.32,.72,0,1);          /* UIKit's presentation curve */
  --d-fast:180ms; --d-ctl:300ms; --d-push:460ms; --d-sheet:520ms; --d-slow:900ms;

  /* ── compatibility: v1 names still used by parts of app.css during the
        migration. Removed when the last v1 rule is gone. ── */
  --ios-bg:var(--bg); --ios-bg-2:var(--bg-2); --ios-bg-3:var(--bg-3);
  --ios-fill:var(--fill); --ios-fill-2:var(--fill-2); --ios-fill-3:var(--fill-3);
  --blue:var(--brand); --green:var(--good); --red:var(--bad); --orange:var(--c-streak);
  --void:var(--bg); --carbon:var(--bg-2); --graphite:var(--bg-3); --steel:var(--sep-opaque);
  --silver:var(--label-2); --platinum:var(--label); --white:#FFFFFF;
  --signal:var(--brand); --signal-lo:var(--brand); --signal-hi:var(--brand-2);
  --ease:var(--ease-ios); --ease-out:cubic-bezier(.25,.1,.25,1);
  --dur-sheet:var(--d-sheet); --dur-ctl:200ms;
  --r-ctl:var(--r-sm); --r-card:var(--r-lg);
  --display:var(--font-display); --body:var(--font-ui);
}
/* the phone decides, unless the user has chosen */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="auto"]{color-scheme:light dark}

/* ───────── base ───────── */
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  background:var(--bg);color:var(--label);
  font-family:var(--font-ui);font-size:var(--t-body);font-weight:400;line-height:1.6;
  letter-spacing:0;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
/* Persian is cursive: tracking tears the joins. Never, anywhere. */
:where(h1,h2,h3,h4,p,li,span,a,button,td,th,label,input,textarea,b,i,small){letter-spacing:0}
::selection{background:color-mix(in srgb,var(--brand) 40%,transparent)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}
/* programmatic focus (a new screen's heading, for screen readers) never rings */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
/* `hidden` must mean hidden, whatever display a component sets */
[hidden]{display:none!important}

.fig{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.latin{unicode-bidi:isolate}

/* ───────── type roles ───────── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.35;text-wrap:balance}
.t-hero{font-family:var(--font-display);font-size:var(--t-hero);font-weight:800;line-height:1.2;
  font-variant-numeric:tabular-nums}
.t-large{font-family:var(--font-display);font-size:var(--t-large);font-weight:800;line-height:1.3}
.t-title1{font-family:var(--font-display);font-size:var(--t-title1);font-weight:800;line-height:1.35}
.t-title2{font-family:var(--font-display);font-size:var(--t-title2);font-weight:750;line-height:1.4}
.t-title3{font-size:var(--t-title3);font-weight:700;line-height:1.45}
.t-headline{font-size:var(--t-headline);font-weight:650;line-height:1.5}
.t-body{font-size:var(--t-body);line-height:1.6}
.t-callout{font-size:var(--t-callout);line-height:1.6}
.t-sub{font-size:var(--t-sub);line-height:1.55;color:var(--label-2)}
.t-foot{font-size:var(--t-foot);line-height:1.55;color:var(--label-2)}
.t-cap{font-size:var(--t-cap);line-height:1.5;color:var(--label-2)}

/* the reveal — content never depends on JS to be visible */
.js .rv{opacity:0;transform:translateY(12px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .42s var(--ease-smooth),transform .42s var(--ease-smooth);
  transition-delay:calc(var(--d,0) * 38ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
}

/* ───────── no light-dark()? then dark, never invisible ───────── */
@supports not (color:light-dark(#000,#fff)){
  :root{
    --bg:#000;--bg-2:#1C1C1E;--bg-3:#2C2C2E;--bg-elev:#242426;
    --label:#fff;--label-2:rgba(235,235,245,.62);--label-3:rgba(235,235,245,.34);--label-4:rgba(235,235,245,.18);
    --fill:rgba(120,120,128,.36);--fill-2:rgba(120,120,128,.32);--fill-3:rgba(118,118,128,.24);--fill-4:rgba(118,118,128,.18);
    --sep:rgba(84,84,88,.6);--sep-opaque:#38383A;--scrim:rgba(0,0,0,.52);--shadow:rgba(0,0,0,.45);
    --brand:#4C8DFF;--brand-2:#A27CFF;
    --c-train:#FF2D63;--c-train-2:#FF6E93;--c-food:#3AE06A;--c-food-2:#B8F24E;
    --c-water:#32C3FF;--c-water-2:#7FE3FF;--c-streak:#FF9F0A;--c-streak-2:#FFD60A;
    --m-prot:#FF6B9A;--m-carb:#FFD60A;--m-fat:#D08CFF;--bub-them:#26262A;
    --good:#32D74B;--warn:#FFB340;--bad:#FF453A;
    --glass:rgba(34,34,38,.56);--glass-strong:rgba(30,30,34,.74);--glass-solid:#1E1E21;
    --glass-edge:rgba(255,255,255,.12);--glass-shine:rgba(255,255,255,.22);
  }
}