/* =====================================================================
   Qlothing Interface Tokens v0.1
   Grounded in Apple's HIG (hierarchy, harmony, consistency) and Qlothing's
   locked brand rules. Every text color below passes WCAG AA on bg AND surface.
   When the Humbleteam Figma arrives: change values here, not structure.
   ===================================================================== */

@property --hole { syntax: '<percentage>'; inherits: false; initial-value: 64%; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 200deg; }

:root {
  /* ---------- Type: the system face. SF Pro on Apple devices, native elsewhere. ---------- */
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Apple text styles (iOS default Dynamic Type size), expressed in px for the web.   size / line / weight */
  --t-large:    700 34px/41px var(--font);   /* Large Title  onboarding screen titles            */
  --t-title1:   700 28px/34px var(--font);   /* Title 1      the wearer's name                   */
  --t-title2:   600 22px/28px var(--font);   /* Title 2      sheet and state titles              */
  --t-title3:   600 20px/25px var(--font);   /* Title 3                                          */
  --t-headline: 600 17px/22px var(--font);   /* Headline     row titles, buttons                 */
  --t-body:     400 17px/24px var(--font);   /* Body         paragraphs (1.4 leading on the web) */
  --t-callout:  400 16px/21px var(--font);   /* Callout                                          */
  --t-subhead:  400 15px/20px var(--font);   /* Subheadline  handles, chips                      */
  --t-footnote: 400 13px/18px var(--font);   /* Footnote     hints, section headers              */
  --t-caption:  400 12px/16px var(--font);   /* Caption 1    fine print, labels in glass         */
  --track-display: -0.01em;                  /* only at 28px and up; body keeps the system tracking */

  /* ---------- Space: 4pt grid, 20pt screen margin ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --margin: 20px;
  --column: 440px;           /* onboarding column max width */
  --page-max: 430px;         /* public page max width (largest iPhone) */
  --tap: 44px;               /* minimum hit target, both axes */

  /* ---------- Radii: concentric. inner = outer - padding. Controls are capsules. ---------- */
  --r-device: 55px;
  --r-sheet: 34px;
  --r-group: 22px;           /* grouped lists, link tiles */
  --r-inner: 14px;           /* things inset 8px inside a group: 22 - 8 */
  --r-capsule: 999px;

  /* ---------- Motion: short, physical, interruptible ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.7%, 1);
  --d-press: 120ms;
  --d-ui: 260ms;
  --d-sheet: 440ms;

  /* ---------- Chrome: a MATERIAL for objects you touch. Never a background, never type. ---------- */
  --chrome:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 42%, rgba(0,0,0,.22)),
    conic-gradient(from var(--spin) at 50% 50%,
      #fdfdfe 0deg, #a8a8ad 38deg, #f4f4f6 74deg, #6c6c72 118deg, #dedee2 164deg,
      #8c8c92 204deg, #fbfbfd 246deg, #5c5c61 292deg, #d0d0d5 330deg, #fdfdfe 360deg);
  --monochrome-mark-black: linear-gradient(145deg, #343536 0%, #111213 44%, #262728 66%, #080909 100%);
  --monochrome-mark-white: linear-gradient(145deg, #ffffff 0%, #efeeec 45%, #fdfcfb 70%, #d6d5d3 100%);
  --glint: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
}

/* Guidance stays legible at the desktop preview's reduced physical size. */
:root, .device {
  --t-practice-title: 600 calc(17px / var(--practice-scale, 1))/1.3 var(--font);
  --t-practice-detail: 400 calc(15px / var(--practice-scale, 1))/1.35 var(--font);
  --t-practice-label: 400 calc(13px / var(--practice-scale, 1))/1.35 var(--font);
}

/* Older engines without linear(): fall back to a gentle ease so transitions still run. */
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring: cubic-bezier(.2, .9, .25, 1.04); }
}

/* ---------- Colorways: the page is the garment ---------- */

/* FDR (grey hoodie). Values sampled from a capture of Humbleteam's "Grey" frame (248:14116):
   Tatyana darkened the grey page for contrast, so the page is near-black and the accent is indigo.
   Replace every value here with the exact Figma styles once the file is exported. */
:root, [data-colorway="fdr"] {
  color-scheme: dark;
  --bg: #191919;
  --bg-deep: #111111;
  --surface: #232323;
  --surface-2: #2d2d2d;
  --label: #f5f4f5;
  --label-2: #a9a9ab;        /* 7.3:1 on bg, 6.6:1 on surface */
  --label-3: #7b7b7e;        /* placeholders and section labels only */
  --separator: rgba(255,255,255,.12);
  --fill: rgba(255,255,255,.06);
  --fill-2: rgba(255,255,255,.12);
  --on-primary: #191919;
  --primary: #f5f4f5;
  --negative: #ff9f97;
  --positive: #9be7b9;
  --accent: #5d66f0;         /* interest tiles, duotone media */
  --accent-2: #3438b0;
  --glow: rgba(86, 64, 214, .62); /* bottom Wearing glow */
  --glass-bg: rgba(40,40,40,.62);
  --glass-edge: rgba(255,255,255,.16);
  --glass-shadow: 0 12px 32px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.08) inset;
  --scrim: rgba(0,0,0,.5);
  --banner-light: rgba(255,255,255,.14);
  --seg-thumb: #4a4a4c;
  --sheet-bg: rgba(38,38,38,.94);
  --hero-shadow: rgba(0,0,0,.55);
  --hero-halo: rgba(93,102,240,.28);
}

/* BLK: garment #1B1B1B, white contrast. */
[data-colorway="blk"] {
  color-scheme: dark;
  --bg: #1b1b1b; --bg-deep: #121212; --surface: #262626; --surface-2: #303030;
  --label: #f0eeef; --label-2: #a3a2a3; --label-3: #8a8989;
  --separator: rgba(255,255,255,.1); --fill: rgba(255,255,255,.07); --fill-2: rgba(255,255,255,.12);
  --on-primary: #1b1b1b; --primary: #f0eeef; --negative: #ffa39c; --positive: #9be7b9;
  --glass-bg: rgba(38,38,38,.64); --glass-edge: rgba(255,255,255,.12);
  --glass-shadow: 0 12px 32px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
  --scrim: rgba(0,0,0,.55); --banner-light: rgba(255,255,255,.1);
  --seg-thumb: #4a4a4a; --sheet-bg: rgba(38,38,38,.95);
  --accent: #6a6ff5; --accent-2: #3a3db8; --glow: rgba(90,70,220,.6);
}

/* WHT: garment #F0EEEF, black contrast. */
[data-colorway="wht"] {
  color-scheme: light;
  --bg: #f0eeef; --bg-deep: #e4e2e3; --surface: #ffffff; --surface-2: #f7f6f6;
  --label: #1b1b1b; --label-2: #5f5f5f; --label-3: #767676;
  --separator: rgba(0,0,0,.1); --fill: rgba(0,0,0,.05); --fill-2: rgba(0,0,0,.08);
  --on-primary: #f0eeef; --primary: #1b1b1b; --negative: #b3261e; --positive: #1f7a44;
  --glass-bg: rgba(255,255,255,.66); --glass-edge: rgba(0,0,0,.08);
  --glass-shadow: 0 12px 32px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.7) inset;
  --scrim: rgba(40,40,40,.28); --banner-light: rgba(255,255,255,.9);
  --seg-thumb: #ffffff; --sheet-bg: rgba(255,255,255,.95);
  --hero-shadow: rgba(0,0,0,.26); --hero-halo: rgba(93,102,240,.22);
  --accent: #5058e8; --accent-2: #2f33a8; --glow: rgba(120,110,240,.35);
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-contrast: more) {
  :root, [data-colorway] { --label-2: var(--label); --separator: rgba(255,255,255,.3); --glass-bg: var(--surface); }
  [data-colorway="wht"] { --separator: rgba(0,0,0,.3); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, [data-colorway] { --glass-bg: var(--surface); --sheet-bg: var(--surface); }
}

/* Humbleteam handoff, 30 Sep 2026. Scoped public-profile tokens retain the
   separate onboarding typography and controls. Native browser chrome is not UI. */
:root {
  --p-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --p-name: 400 20px/1.2 var(--p-font);
  --p-body: 400 14px/1.4 var(--p-font);
  --p-small: 400 12px/1.2 var(--p-font);
  --p-section: 500 12px/1.2 var(--p-font);
  --p-caption: 400 10px/1.2 var(--p-font);
  --p-caption-strong: 500 10px/1.2 var(--p-font);
  --p-card-title: 500 16px/1.2 var(--p-font);
  --p-product: 700 18px/1.2 var(--p-font);
  --p-initial: 500 32px/1.2 var(--p-font);
  --p-avatar-type: 500 20px/1.2 var(--p-font);
  --p-sticky-name: 400 16px/1.2 var(--p-font);
  --p-white: #fff;
  --p-black: #000;
  --p-cover-bg: #151616;
  --p-cover-overlay: rgba(0,0,0,.5);
  --p-badge-bg: rgba(255,255,255,.08);
  --p-divider-opacity: .3;
  --p-border-light: rgba(255,255,255,.1);
  --p-media-bg: #121314;
  --p-blue-tint: #00288d;
  --p-support-tint: #0048ff;
  --p-image-placeholder: #282931;
  --p-image-ink: rgba(255,255,255,.45);
  /* Light Card / Social icon instance effect (0,2,16 at 4%); their Fill + Shadow rings live in the native material band. */
  --p-light-shadow: 0 2px 16px rgba(0,0,0,.04);
  --p-hoodie-shadow: 0 0 54px rgba(255,255,255,.12);
  --p-hoodie-inset: inset 0 4px 2px rgba(190,168,255,.45),inset 0 4px 4.5px rgba(232,224,255,.55);
  --p-black-hoodie-gradient: linear-gradient(170.68deg,rgba(5,4,6,0) 45.103%,rgb(124,68,237) 103.22%);
  --intro-bg: #030303;
  --intro-ink: #fff;
  --intro-avatar-border: #08090a;
}
[data-profile-theme] {
  --p-bg: #191919; --p-ink: #fff; --p-card-ink: #fff; --p-label-ink: #fff;
  --p-avatar-border: #08090a; --p-soc-bg: rgba(255,255,255,.04);
  --p-button-bg: rgba(255,255,255,.08); --p-card-bg: rgba(18,19,20,.2);
  --p-bio-opacity: .4; --p-section-opacity: .4;
  --p-hoodie-bg: #000; --p-hoodie-muted: .4;
  --p-sticky-bg: rgba(25,25,25,.86);
  /* Native Figma materials (GLASS, blend fills and inner shadows do not survive SVG/code export).
     Dark: 3 Oct exports from the native-edit page. White: 9 Oct captures of the white Wearer profile
     page's own Light instances (references/figma/2026-10-09/material-provenance.json). */
  --p-material-social: url('/assets/figma/materials/social-native-8x.png');
  --p-material-card: url('/assets/figma/materials/card-working-native-2x.png');
  --p-material-support: url('/assets/figma/materials/card-support-native-2x.png');
  --p-material-button: url('/assets/figma/materials/view-button-native-4x.png');
  --p-material-band: 4px; --p-material-bleed: 0px;
}
[data-profile-theme="black"] { --p-bg:#08090a; --p-sticky-bg:rgba(8,9,10,.86); }
[data-profile-theme="white"] {
  --p-bg:#e4e4e4; --p-ink:#000; --p-card-ink:#1a1a1a; --p-label-ink:#08090a;
  /* Disc and card interiors measured from the native Light renders (#e5→#ea top to bottom, cards #ebebeb). */
  --p-avatar-border:#dfdfdf; --p-soc-bg:linear-gradient(#e5e5e5,#eaeaea); --p-button-bg:#fff; --p-card-bg:#ebebeb;
  --p-bio-opacity:.7; --p-section-opacity:.7; --p-hoodie-bg:#dfdfdf; --p-hoodie-muted:.7;
  --p-sticky-bg:rgba(228,228,228,.86);
  --p-material-social: url('/assets/figma/materials/social-light-8x.png');
  --p-material-card: url('/assets/figma/materials/card-working-light-2x.png');
  --p-material-support: url('/assets/figma/materials/card-support-light-2x.png');
  --p-material-button: url('/assets/figma/materials/view-button-light-4x.png');
  /* The Light exports hold pure material out to the 8px card padding, plus 1px of their hairline ring. */
  --p-material-band: 8px; --p-material-bleed: 1px;
  /* The 30 Sep white SVG exports resolved social/icon and icon/primary in the dark mode (white). The White
     mode values are neutral/1000 and black, so the exported paths are kept and only darkened here. */
  --p-glyph-filter: brightness(0);
}