/* Aura v2 tokens. Source of truth: projects/aura-v2/DESIGN-MAP.md (sections A-E), written 2026-10-03. Reference = RUBRIC Agentic OS (REFERENCE-SPEC-A 1684x803 window, REFERENCE-SPEC-B 1920x907 app area). Type/material/radii logic = IRIS (product/design-system/design.md + iris.tokens.yaml). Colour = Aura Obsidian Bloom (projects/aura-os-rebuild/aura-tokens.css). Black canvas stays black. Families are loaded by app/src/fonts.css: 'Archivo', 'Instrument Sans', 'DotGothic16'. Hue check: every hex here converts to HSL hue 309-330 deg or saturation <= 15% (neutral). Verify: python3 -c "import re,colorsys;s=open('app/src/tokens.css').read();[print(h,round(colorsys.rgb_to_hls(*[int(h[i:i+2],16)/255 for i in (1,3,5)])[0]*360)) for h in set(re.findall(r'#[0-9a-fA-F]{6}',s)) if (lambda H,L,S:S>.15 and not 290<=H*360<=345)(*colorsys.rgb_to_hls(*[int(h[i:i+2],16)/255 for i in (1,3,5)]))]" */ :root { /* ─── A0. COLOUR RAMP (solid) ─────────────────────────────────────────────────── */ --c-void: #000000; /* A §2 #070705 page bg -> Aura --void (brief §7: black stays black) */ --c-void-warm: #0d030a; /* A §2 #131311 path field, #151512 search pill, #110f08 time pill, #151410 badge, #141211 ring track -> Aura --void-warm */ --c-surface: rgba(255,50,186,.10); /* A §2 #25221b skill/preview card, B #242018 modal, #080c18 brain panel, #0c0c18 inspector = #1a0513 on void (Aura --surface #1a0512) */ --c-surface-opaque: #1a0512; /* same colour, opaque, for the terminal block on the light report page (B scr 4 #181814) */ --c-shell: rgba(255,50,186,.20); /* B 1.5 #141824 control fill, #101420 drawer buttons, #0d2238 app hex fill = #33001f on void (Aura --shell) */ --c-plum: #85134c; /* A §2 #513c32 top rule (same luminance band); B #58a2df applications ring; B scr 5 #1e3448 active tab; Aura --dim */ --c-orchid: #c22383; /* NEW step = (plum + pink) / 2; B 1.2 #2094f4 COMMUNITY; pink text on paper under 24px */ --c-pink: #ff32ba; /* A §2 #ff6b1a PRIMARY ORANGE and every orange at 100%: clock, 47, 170,000, OPEN FILE, plates, NEXT, FABLE #e56420, cursor #ee7128; B #fc681c #e8743a #f86d1c #ff6d15 #ff7321 #fc8838 #e46014 */ --c-pink-soft: #ff65cb; /* A §2 #d56c36 "Agentic OS" softer orange, #d56c38 icon accents; B #ff8a5c sprite, #f9b27a hub sprite; B 1.2 routines ring #f0a030/#d8a040/#c8922f; Aura --pink-soft */ --c-mauve: #cb96c2; /* NEW muted step = glow 60% + text-62 40%; B 1.2 BUSINESS #b478fc/#b191e6, MEMORY label #9b6ad6; A §11 HAIKU #249a7a; A §10 tan segment #b9b19d; particle gold-tan #9a8175 */ --c-glow: #ff99ed; /* B 1.2 CONTENT #e040fc/#e739fd; A §11 OPUS #9c65e4/#7960a2; particle lilac #8a6fc0; Aura --glow */ --c-bloom: #ffccf2; /* B 1.2 PRODUCT #00bcd0/#33b8c1; A §11 SONNET #4885b2; A §10 cream segment #e5e2d0; B 1.9 green status dot #3ddc5a; Aura --bloom */ --c-text: #f5eef4; /* A §2 #eceae1 wordmark, #edeae0 card title, #edeae6 pixel icons; B #fbfbfb offset-plate button fill, #dce4f0 active segment fill; Aura --text */ --c-white: #ffffff; /* A §2 #ffffff slider knob, #fffffb particle core; B hub labels; B 1.2 PERSONAL #f8d834/#f2d754 */ /* pink alphas: NON-TEXT only (pink text is always --c-pink; at 55% it is 2.47:1) */ --c-pink-85: rgba(255,50,186,.85); /* hover of pink outlines (#d92a9e on void, 4.78:1) */ --c-pink-70: rgba(255,50,186,.70); /* A §13 #d17b4a dashed edit border; A §8 #b76232 search-match ring; A §10 #884829 envelope icons, #814729 synced dot; A §14 #492e23 pill edge */ --c-pink-55: rgba(255,50,186,.55); /* A §7 #ab6844 floating hex border; A §11 #a0643e play border, #7c4426 ADD SKILL border; A §4 #855031 logo stroke; B 1.2 #764028 SKILLS ring line */ --c-pink-40: rgba(255,50,186,.40); /* A §6 #6c482e clock second hand; B 1.2 #dd9c6e CLAUDE.MD glow */ --c-pink-glow: 0 0 6px rgba(255,50,186,.5); /* A §8 soft outer glow on matched balls (~6px); B hovered nodes */ /* text ramp: alpha of --c-text on void; contrast on void in the comment */ --c-text-88: rgba(245,238,244,.88); /* #d8d1d7 14.05:1. A §3 #d9d9d5 panel titles, #dfded7 timezone times/routine names, #d9d9cd skill names, #e6e4da filled squares; B #d3d5e2 mono, #d8dce8 #dcdfee button text */ --c-text-78: rgba(245,238,244,.78); /* #bfbabe 10.96:1. A §3 #cbcbc3 app names, #cecec6 subjects, #cac9c3 events, #b0b0ab ADD APP label, #afaba8 ball icons; B #c0c4d0 connection names, #c8c4bc */ --c-text-62: rgba(245,238,244,.62); /* #989497 6.99:1. A §2 #767670 subtitle, #787770 card description, #80807e ball outline, #7e7f79 header icons, #8a8a84 CLOSE, #9a9a92 gear; B #9b9faa #8a8e9a #828692 #9a9db0 inactive controls */ --c-text-50: rgba(245,238,244,.50); /* #7b7779 4.88:1 = THE FUNCTIONAL FLOOR. A §3 #60605c..#73716a small caps labels, #68685f descriptions, #72736f date, #55544e placeholder, #484846 micro labels, #555450 QUEUED/tags, #4f504b ages; B #545864 #4c505c #66697c #6a6e7a */ --c-text-38: rgba(245,238,244,.38); /* #5d5a5d 3.10:1, non-text: A §6 #5e5d5b future-week outline, A §10 #545550 OTHER segment, A §11 #61605a popover dots, B 1.5 #808084 slider track */ --c-text-22: rgba(245,238,244,.22); /* #363436, non-text: A §7 #373735 past-day dot without upload */ --c-text-14: rgba(245,238,244,.14); /* #222122, non-text: A §9 #605e5d wireframe at 35%, A §5 #252523 row arrow at rest, A §8 #2a2927 ball inner hex */ /* lines (pink-tinted per Aura --hairline, lifted to the reference's divider luminance) */ --c-line: rgba(255,153,237,.22); /* #382234 on void. A §1 #383836 panel dividers, clock ring; #393937 button borders; #3a3a35 CLOSE border; #403f36 gear; B #1c2030 #1c1e2a #3a3e4c #2a2e3c #22221f #2a2e38 */ --c-line-soft: rgba(255,153,237,.14); /* #241521 on void = Aura --hairline. A §12 #2a2927 table rule, #181816 future-dot outline, #201d18 "i" ball outline, #1a1813 card inset, B #2a2a26 card top highlight */ --c-honeycomb: rgba(255,153,237,.10); /* #1a0f18 on void. A §1 #1a1a18 honeycomb lines, A §13 #1a1917 edit grid, B 1.1 #141414 brain hex grid */ --c-wash: rgba(255,50,186,.08); /* A §13 #150c07 selected widget fill; B scr 5-8 #1a1714 hovered row; Aura --wash */ --c-wash-strong: rgba(255,50,186,.14); /* B 1.1 #583020 warm hex tint inside the SKILLS ring under zoom */ --c-rule-top: var(--c-plum); /* A §1 3px rule #513c32; B intro 1px rule #3a2a1a */ /* light surface (skill-run report page only; B scr 4) */ --c-paper: #f5eef4; /* B scr 4 #f0ece8 cream page */ --c-ink: #000000; /* B scr 4 #1a1a1a rule/title, #222 body, #333 sub line */ --c-ink-2: rgba(0,0,0,.55); /* B scr 4 #888480 captions and meta labels */ --c-ink-line: rgba(0,0,0,.10); /* B scr 4 #dcd8d0 divider */ /* semantic aliases (A4) */ --c-model-fable: var(--c-pink); /* A §11 FABLE #e56420 */ --c-model-opus: var(--c-glow); /* A §11 OPUS #9c65e4 pill, #7960a2 / #564271 label */ --c-model-sonnet: var(--c-bloom); /* A §11 SONNET #4885b2 */ --c-model-haiku: var(--c-mauve); /* A §11 HAIKU #249a7a */ --c-dept-skills: var(--c-pink); /* B 1.2 #fc681c stars */ --c-dept-content: var(--c-glow); /* B 1.2 #e040fc */ --c-dept-business: var(--c-mauve); /* B 1.2 #b478fc; planet highlight uses --c-bloom (#dbc7ff), shade --c-mauve (#b494d8) */ --c-dept-community: var(--c-orchid); /* B 1.2 #2094f4 */ --c-dept-product: var(--c-bloom); /* B 1.2 #00bcd0 */ --c-dept-personal: var(--c-white); /* B 1.2 #f8d834 */ --c-ring-routines: var(--c-pink-soft); /* B 1.2 #f0a030 nodes, #d8a040 label, #c8922f line (line at .7 alpha) */ --c-ring-apps: var(--c-plum); /* B 1.2 #58a2df stroke/glow, #4a9ad8 label (label rendered in --c-orchid for 3.86:1) */ --c-particle-1: var(--c-pink); /* A §9 #d17249 coral core (hot centre --c-white #fffffb) */ --c-particle-2: var(--c-mauve); /* A §9 #9a8175 gold-tan lobe */ --c-particle-3: var(--c-plum); /* A §9 #607f77 teal lobe */ --c-particle-4: var(--c-glow); /* A §9 #8a6fc0 lilac lobe */ --c-mix-1: var(--c-pink); /* A §10 #fa6c1d PARTNERS */ --c-mix-2: var(--c-bloom); /* A §10 #e5e2d0 LEADS (cream) */ --c-mix-3: var(--c-mauve); /* A §10 #b9b19d PERSONA (tan) */ --c-mix-4: var(--c-text-38); /* A §10 #545550 OTHER (grey) */ --c-live: var(--c-bloom); /* B 1.9 #3ddc5a green status dot */ --c-danger: var(--c-pink); /* B 1.8 #bf5154 red Remove: 1.5px outline + leading x glyph + confirm (F13) */ --c-focus: var(--c-glow); /* IRIS focus ring: 2px outline, 2px offset (reference shows none) */ /* glass (DESIGN.md section 4: every dashboard panel and every floating surface) */ --c-glass-fill: rgba(255,204,242,.085); /* top of the card fill; also the flat veil used by older rules */ --c-glass-edge: rgba(255,204,242,.16); /* 1px card edge */ --c-glass-highlight: rgba(255,255,255,.12); /* inset top highlight */ --c-glass-shadow: 0 26px 60px -30px rgba(0,0,0,.85); /* IRIS glass_shadow */ --glass-fill: linear-gradient(180deg, rgba(255,204,242,.085), rgba(255,204,242,.05)); --glass-fill-float: linear-gradient(180deg, rgba(255,204,242,.12), rgba(255,204,242,.08)); /* popover, drawer, modal over the particle or node field */ --glass-edge: 1px solid var(--c-glass-edge); --glass-shadow: inset 0 1px 0 var(--c-glass-highlight), var(--c-glass-shadow); --glass-fallback: rgba(26,5,18,.92); /* #1a0512 at .92 where backdrop-filter is unsupported */ --glass-blur: 22px; /* IRIS surface.blur */ --glass-saturate: 1.2; /* IRIS surface.glass_saturate */ --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* ambient world behind the glass (DESIGN.md section 4): existing hues only */ --bloom-pink: rgba(255,50,186,.30); /* --c-pink at .30 */ --bloom-plum: rgba(133,19,76,.45); /* --c-plum at .45 */ --bloom-glow: rgba(255,153,237,.10); /* --c-glow at .10 */ --grain-alpha: .035; /* 3.5% grain */ /* dim states (layer opacity, never a colour) */ --dim-backdrop: .30; /* A §15 page dims to ~30% under the preview card; B scr 3 ~25% (#4d4d4b) */ --dim-unmatched: .12; /* A §14 non-matching balls ~12% (#0c0b09 outline) */ --dim-fired: .50; /* A §12 FIRED rows ~35% (#2d2c2a) lifted to .50 so FIRED still reads */ --dim-aside: .30; /* B scr 2 side columns dim to ~30% while searching */ --dim-collapsed: .15; /* B 1.3 memory band fades to ~15% after Collapse all */ --dim-wedge: .30; /* B 1.3 other wedges dim to ~30% on department hover */ --alpha-bokeh: .15; /* B 1.2 #241c2c / #342c24 bokeh haze = department colour at ~20% */ /* ─── B. TYPE ─────────────────────────────────────────────────────────────────── */ --f-title: 'Archivo', system-ui, sans-serif; /* IRIS display family: titles, wordmarks, ring labels only */ --f-body: 'Instrument Sans', system-ui, sans-serif; /* IRIS body family: rows, controls, labels, prose */ --f-figure: 'DotGothic16', system-ui, sans-serif; /* IRIS readout family: figures only, 13px floor */ /* sizes: clamp(floor, reference/16.84 vw, reference x1.14). Floors = IRIS (13 control/readout, 11 metadata) or reference x.855 */ --fs-wordmark: clamp(26px, 1.78vw, 34px); /* B1 #1-2: RUBRIC / Agentic OS 29-30px */ --fs-subtitle: clamp(13px, .83vw, 16px); /* B1 #3: "Jay E | RoboNuggets" 14px; B2 #28 byline 11px */ --fs-panel-title: clamp(15px, 1.01vw, 19px); /* B1 #4: MICRO APPS etc 17px; B2 #46 landing card titles 14px */ --fs-card-title: clamp(20px, 1.43vw, 27px); /* B1 #7: preview card title 24px, run modal 18px; B2 #40-41 inspector/drawer titles 15px; #45 Generations 18px */ --fs-row: clamp(15px, 1.1vw, 18px); /* DESIGN row-name; floor 15 so a row is never the smallest text on its card */ --fs-control: clamp(13px, .9vw, 15px); /* B1 #13: button labels 10-11px -> IRIS machine-control floor 13; #15 popover headers; #17 state words; #24 hover label */ --fs-state: var(--fs-control); /* B1 #17: NEXT / QUEUED / FIRED (IRIS machine-state) */ --fs-body: clamp(15px, 1.1vw, 17px); /* DESIGN body */ --fs-desc: clamp(13px, .9vw, 15px); /* DESIGN row-desc */ --fs-label: 12px; /* DESIGN section-label: 12px at --c-text-62 */ --fs-meta: 11px; /* DESIGN meta: sync, age, units only, --c-text-50 */ --fs-diagram: clamp(12px, .8vw, 13px); /* B2 #32: node labels 9px -> IRIS machine-diagram floor 12 */ --fs-search: clamp(14px, .89vw, 17px); /* B1 #22: search input 14-15px */ --fs-readout-hero: clamp(29px, 2.03vw, 39px); /* B1 #5: clock 40px x.855 x.854 optical = 29 nominal (DotGothic16) */ --fs-readout-value: clamp(24px, 1.65vw, 32px); /* B1 #6: 170,000 34px and 47 31px, unified */ --fs-readout-time: clamp(13px, .87vw, 15px); /* B1 #8: timezone times 17px -> 13 nominal (floor) */ --fs-readout-inline: clamp(13px, .77vw, 14px); /* B1 #19-20: routine times 12px dotted, age badges 9px -> 13 floor; #12 Wk34; #21 micro figures; B2 #37 slider values */ --fs-readout-count: clamp(13px, .9vw, 16px); /* B2 #33: planet counts 11-18px */ --fs-readout-meta: 16px; /* B2 #43 report meta values 18px, #46 step numerals 18px */ --fs-brain-title: clamp(19px, 1.15vw, 22px); /* B2 #27: RUBRIC SECOND BRAIN 22px */ --fs-ring-label: clamp(19px, 1.15vw, 22px); /* B2 #30: SKILLS 20px, MEMORY / ROUTINES / APPLICATIONS 22px */ --fs-prose: clamp(17px, 1.55vw, 21px); /* B2 #41, #43, #46: drawer / report / landing prose 14px -> IRIS body step */ --fs-h2: clamp(24px, 3.4vw, 46px); /* B2 #41: drawer H2 18px -> IRIS title step floor */ --fs-mono: 13px; /* B2 #41, #43: mono 12px -> 13 */ --fs-report-title: clamp(28px, 1.9vw, 36px); /* B2 #43: "/clean-up" 30px */ --fs-landing-title: clamp(36px, 2.4vw, 46px); /* B2 #46: "Landing PAD" 40px */ /* weights (IRIS type.axes.wght) */ --fw-wordmark: 700; /* IRIS wordmark; reference 800 */ --fw-title: 500; /* Archivo titles under 24px (F2); reference 500-800 */ --fw-light: 300; /* IRIS display; "Agentic OS", "SECOND BRAIN", "Landing" */ --fw-body: 400; /* IRIS body */ --fw-label: 500; /* IRIS functional */ --fw-strong: 600; /* IRIS functional_strong: controls, row names, state words; reference 600-800 */ --fw-readout: 400; /* DotGothic16 single weight */ /* tracking */ --tr-wordmark: 0; /* B1 #1 */ --tr-subtitle: .12em; /* IRIS machine label rhythm */ --tr-panel-title: .12em; /* IRIS functional tracking, with reference uppercase shape */ --tr-ring-label: .2em; /* B2 #30: reference .2em, kept */ --tr-brain-title: .18em; /* B2 #27 */ --tr-title: -.034em; /* IRIS title tracking */ --tr-control: .08em; /* IRIS machine-control; reference .15-.2em */ --tr-label: .14em; /* IRIS machine-metadata; reference .2-.3em */ --tr-label-wide: .12em; /* B1 #12 date line, #22 search input */ --tr-state: .10em; /* IRIS machine-state */ --tr-diagram: .08em; /* IRIS machine-diagram */ --tr-readout: .02em; /* IRIS readout-value; hero .01em */ /* line heights */ --lh-tight: 1.15; /* controls, labels (IRIS) */ --lh-row: 1.4; /* IRIS row role */ --lh-body: 1.52; /* IRIS body role */ --lh-prose: 1.52; /* IRIS body */ --lh-readout: 1.0; --lh-wordmark: 1.15; --lh-title: 1.06; /* page-title */ --lh-card-title: 1.15; --lh-row-desc: 1.45; --lh-label: 1.2; /* section-label, meta */ --lh-readout-inline: 1.15; /* type scale (DESIGN.md section 2): one token set per step, size / line-height / tracking / weight. Use these in new rules instead of raw px. */ --t-wordmark-size: var(--fs-wordmark); --t-wordmark-lh: var(--lh-wordmark); --t-wordmark-tr: var(--tr-title); --t-wordmark-fw: var(--fw-wordmark); --t-page-title-size: var(--fs-h2); --t-page-title-lh: var(--lh-title); --t-page-title-tr: var(--tr-title); --t-page-title-fw: var(--fw-light); --t-card-title-size: var(--fs-panel-title); --t-card-title-lh: var(--lh-card-title); --t-card-title-tr: var(--tr-panel-title); --t-card-title-fw: var(--fw-title); --t-row-name-size: var(--fs-row); --t-row-name-lh: var(--lh-row); --t-row-name-tr: 0; --t-row-name-fw: var(--fw-strong); --t-row-desc-size: var(--fs-desc); --t-row-desc-lh: var(--lh-row-desc); --t-row-desc-tr: 0; --t-row-desc-fw: var(--fw-body); --t-body-size: var(--fs-body); --t-body-lh: var(--lh-body); --t-body-tr: 0; --t-body-fw: var(--fw-body); --t-prose-size: var(--fs-prose); --t-prose-lh: var(--lh-prose); --t-prose-tr: 0; --t-prose-fw: var(--fw-body); --t-control-size: var(--fs-control); --t-control-lh: var(--lh-tight); --t-control-tr: var(--tr-control); --t-control-fw: var(--fw-strong); --t-section-label-size: var(--fs-label); --t-section-label-lh: var(--lh-label); --t-section-label-tr: var(--tr-label); --t-section-label-fw: var(--fw-label); --t-meta-size: var(--fs-meta); --t-meta-lh: var(--lh-label); --t-meta-tr: var(--tr-label); --t-meta-fw: var(--fw-label); --t-readout-hero-size: var(--fs-readout-hero); --t-readout-hero-lh: var(--lh-readout); --t-readout-hero-tr: .01em; --t-readout-value-size: var(--fs-readout-value); --t-readout-value-lh: var(--lh-readout); --t-readout-value-tr: var(--tr-readout); --t-readout-inline-size: var(--fs-readout-inline); --t-readout-inline-lh: var(--lh-readout-inline); --t-readout-inline-tr: .04em; /* ─── C. GEOMETRY ─────────────────────────────────────────────────────────────── */ /* columns (A §1: 416 / 844 / 424 of 1684) */ --col-left: clamp(300px, 24.7vw, 520px); /* 356 @1440, 474 @1920, 520 max (DESIGN section 9) */ --col-centre: 1fr; /* 721 / 962 / 1283 */ --col-right: clamp(300px, 25.2vw, 520px); /* 363 / 484 / 520 max */ --s-col-pad: 26px; /* card padding, s-8 */ --s-rule-top: 3px; /* A §1 */ --s-divider: 2px; /* A §1 panel dividers */ --s-panel-top: 18px; /* kept for older rules; card padding is --s-card-pad */ --hex-cell: clamp(34px, 2.4vw, 56px); /* A §1 honeycomb cell ~40px; B 1.1 ~56px */ --edit-grid: calc(100vw / 32); /* A §1 edit-mode grid 52.6px = 32 columns */ --btn-float: 44px; /* A §7, §13 floating buttons 36 -> IRIS min target */ --s-float-inset: 14px; /* A §7 14-15px from the corner -> s-5 */ /* header (A §4) */ --header-top: 6vh; /* block y 47/803 */ --icon-logo: clamp(18px, 1.07vw, 24px); /* 18px hexagon */ --icon-sm: 16px; /* IRIS icon-sm; header icons 15-16 */ --icon-stroke: 1.5px; /* IRIS / A §4 */ --header-icon-pitch: 44px; /* A §4 pitch 35 -> 44 hit targets (F11) */ /* ring (A §8-9) */ --ring-r: min(22.6vw, 42vh); /* 380/1684; 325 @1440x900, 434 @1920x1080, 579 @2560x1440 */ --ring-cx: 50%; /* centre of the centre column */ --ring-top: 21vh; /* ring top y 170/803 */ --ring-cy: calc(var(--ring-top) + var(--ring-r)); --ring-ball: clamp(44px, 3.09vw, 80px); /* 52/1684; 44 / 59 / 79 */ --ring-slots: 44; /* 8.2 deg pitch */ --ring-ball-stroke: 1.5px; /* A §8 1.5-2px #80807e -> --c-text-62 */ --icon-ball: clamp(16px, 1.07vw, 24px); /* A §8 18px icon */ --ring-track-in: .942; /* r 358/380 */ --ring-track-out: 1.063; /* r 404/380 */ --ring-rim: .926; /* 1px inner rim at r 352 */ --ring-match-r: .83; /* A §14 matched balls pulled to r 300..330 */ --globe-r: calc(var(--ring-r) * .803); /* A §9 305/380 */ --cloud-r: calc(var(--ring-r) * .29); /* A §9 110/380 */ --cloud-core: 10px; /* A §9 hot white centre */ --stars: 400; /* A §9 */ --badge-w: 36px; /* A §8 age badge 34x12 -> 36x18 (13px readout) */ --badge-h: 18px; --badge-overlap: -3px; /* A §8 pill top = ball bottom - 3 */ --label-offset: calc(var(--ring-r) * .447); /* A §9 hover label 170px below the cloud centre */ --search-w: clamp(240px, 16.7vw, 340px); /* A §14 pill 282/1684 */ --search-h: 40px; /* A §14 36 -> 40 (14px text) */ --search-h-typed: 60px; /* A §14 52 -> 60 (two lines) */ --tooltip-w: 220px; /* A §8 214 */ /* panel internals (C4-C5) */ --s-row-pitch: 36px; /* A §5 app rows 34 */ --s-event-pitch: 24px; /* A §6 events 21; A §10 flagged rows 21 */ --s-routine-pitch: 26px; /* A §12 rows 23.7 */ --clock-face: clamp(48px, 3.3vw, 64px); /* A §6 56x55 */ --sq: 10px; /* A §6 quarter squares 11x12 */ --sq-pitch: 13px; /* A §6 14.5 */ --sq-row-pitch: 15px; /* A §6 14 */ --dot: 14px; /* A §7 upload dots 14 */ --dot-today: 19px; /* A §7 today ring 19, 2px */ --dot-col-pitch: 32px; /* A §7 32.4 */ --dot-row-pitch: 18px; /* A §7 18 */ --bar-h: 8px; /* A §10 mix bar 8 */ --pill-time-w: 52px; /* A §12 time pill 47x18 -> 52x22 */ --pill-time-h: 22px; --popover-w: 356px; /* A §11 popover 300 -> 356 (13px headers, F1) */ --popover-row: 36px; /* A §11 31 */ --popover-col: 52px; /* A §11 41 */ --knob: 20px; /* A §11 white knob 20 */ --card-w: clamp(360px, 24.1vw, 460px); /* A §15 preview card 406/1684; B scr 3 run modal 447 */ --card-lift: 100px; /* A §15 card bottom ~100px above the ring centre */ --s-plate: 8px; /* A §15 pink offset plate +8/+8 (B scr 3 +12 unified) */ --s-plate-sm: 3px; /* B 1.1 offset-plate buttons +3/+3 */ --btn-h: 28px; /* buttons 20-22 -> 28 (13px label + 2x7); card buttons 33 keep 33 */ --btn-h-card: 33px; /* A §15 OPEN FILE 33 tall */ --edit-badge: 28px; /* A §13 remove badge quarter-disc r 24 */ --edit-handle: 16px; /* A §13 resize square 14 */ /* Second Brain scene (B 1.2; fractions of the APPLICATIONS radius R = 465 at 1x in a 907px-tall app) */ --brain-R: 51.3vh; /* 465/907 */ --brain-skills: .204; /* r 95 */ --brain-hubs: .29; /* r 135 */ --brain-memory-in: .32; /* r 150 */ --brain-memory-out: .71; /* r 330 */ --brain-routines: .865; /* r 402 */ --brain-hub: 24px; /* 22 at 1x */ --brain-hub-core: 40px; /* CLAUDE.MD disc 40 */ --brain-node: 5px; /* file dots 4-6 */ --brain-routine-node: 12px; /* target discs 12, ring 22 */ --brain-app-hex: 44px; /* hexagons 40 -> 44 (clickable) */ --brain-panel-w: clamp(320px, 19vw, 360px); /* B 1.5 252 -> 320 (13px segments, F1) */ --brain-inspector-w: 330px; /* B 1.8 293 -> 330 (three 13px buttons) */ --brain-drawer-w: clamp(420px, 29vw, 600px); /* B 1.9 555/1920 */ --report-col: 640px; /* B scr 4 755 -> 640 (IRIS 34ch measure at 17px) */ --tile-w: 310px; /* B scr 5 tiles 310, gap 13 */ --tile-gap: 13px; --landing-card-w: 302px; /* B scr 8 302, gap 15 */ --landing-gap: 15px; /* radii (IRIS geometry.radius + the concentric results; C7) */ --r-0: 0; /* hairlines, the drawer sheet, build-card footer inner corners */ --r-dot: 2px; /* A §6 quarter squares 2 */ --r-4: 4px; /* = 14 - 10: play/gear in a skill card; = 22 - 18: chips in a landing card; mix segments */ --r-8: 8px; /* = 22 - 14: path field + buttons in a floating card, brain search field, segmented buttons */ --r-control: 14px; /* IRIS r-control: standalone buttons (capsule at 28), search pill, skill cards, tooltips, floating buttons, time pills, badges */ --r-card: 22px; /* IRIS r-card: preview card, run modal, popover, brain panel, inspector, dropdown, landing cards, tiles */ --r-panel: 28px; /* IRIS r-panel: phone bottom sheet top corners */ --r-round: 50%; /* balls, nodes, hubs, dots */ --r-capsule: 999px; /* chips, toggles, segmented switches, time pills only */ /* spacing (IRIS space.scale, 2px base) */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 10px; --s-5: 14px; --s-6: 18px; --s-7: 22px; --s-8: 26px; --s-9: 38px; --s-10: 56px; --s-11: 84px; --s-12: 128px; --s-page-margin: clamp(18px, 3vw, 48px); /* IRIS layout.margin; the one spacing value allowed to follow the viewport width */ /* spacing roles (DESIGN.md section 3). Nothing here depends on vh or vw: if it does not fit, it scrolls. */ --s-inline: var(--s-3); /* icon to label 6 (10 = --s-4 for wider pairs) */ --s-row-pad: var(--s-4); /* row padding, vertical 10 (12 where a row holds two lines) */ --s-card-pad: var(--s-8); /* card padding 26 (22 under 768, see the phone block) */ --s-card-head: var(--s-6); /* card head to body 18 */ --s-block: var(--s-6); /* block to block inside a card 18 */ --s-group: var(--s-7); /* group to group inside a card 22 */ --s-card-gap: var(--s-6); /* card to card 18 */ --s-card-group: var(--s-9); /* card group to card group 38 */ --s-header-ring: var(--s-9); /* header bottom to ring top 38 */ --s-ring-clear: var(--s-9); /* ring to column clearance, at least 38 */ --s-row-min: 44px; /* single-line row minimum; two-line rows 56; hit target 44 */ --s-row-min-2: 56px; --s-name-desc: var(--s-1); /* row name to description 2 */ /* ─── D. MOTION ───────────────────────────────────────────────────────────────── */ --ease: cubic-bezier(.2,.7,.2,1); /* IRIS motion.easing */ --ease-fly: cubic-bezier(.16,1,.3,1); /* B 1.4 Fly to, ~1s ease-out */ --dur-hover: .28s; /* IRIS dur-hover */ --dur-reveal: .7s; /* IRIS dur-reveal: drawer slide, panel reveal */ --dur-enter: .7s; /* DESIGN section 10: card entrance, fade plus 8px rise */ --enter-rise: 8px; --stagger: 60ms; /* entrance stagger per card */ --dur-card: .18s; /* A §15 card entrance (GUESS 150ms): fade + scale .96 */ --dur-fly: 1s; /* B 1.4 */ --dur-settle: 2s; /* B 1.4 load settle */ --dur-cloud: 75s; /* A §9 cloud rotation period 60-90s */ --dur-globe: 180s; /* A §9 globe ~1 rev / 3 min (GUESS) */ --dur-tick: 1s; /* A §16 clock tick */ --dur-cursor-lerp: .055; /* IRIS cursor_lerp for any pointer-follow */ /* z (IRIS z order) */ --z-canvas: 0; --z-content: 10; --z-grain: 20; --z-chrome: 30; --z-overlay: 40; } @media (min-width:1100px) and (max-height:800px) { :root { --ring-r: min(22.6vw,33vh); --ring-top: 23vh; } } /* ─── E. PHONE (DESIGN-MAP section E; proof width 390) ─────────────────────────── */ @media (max-width: 767px) { :root { --col-left: 100vw; --col-centre: 100vw; --col-right: 100vw; /* single column, order: header, ring, micro apps, calendar, stats, email, skills, routines */ --s-col-pad: 18px; /* IRIS phone margin */ --s-card-pad: 22px; /* card padding under 768 (DESIGN section 3) */ --ring-r: 44vw; /* 172px: ring + 44px balls = 388 inside 390 */ --ring-top: 0px; /* the ring block is its own 100vw square; cy = 50% of it */ --ring-slots: 22; /* every second slot: 49px pitch at r 172 keeps 44px balls apart */ --ring-ball: 44px; /* controls stay 44 */ --search-w: calc(100vw - 36px); /* search pill always visible under the ring on phone */ --popover-w: calc(100vw - 36px); /* 354 */ --popover-col: 50px; --card-w: calc(100vw - 36px); /* preview card / run modal 354 */ --card-lift: 0px; /* centred in the viewport on phone */ --brain-panel-w: 100vw; /* bottom sheet behind MENU */ --brain-inspector-w: calc(100vw - 36px); --brain-drawer-w: 100vw; --brain-R: 28vh; /* ~0.55x so all four rings fit (B scr 7) */ --report-col: calc(100vw - 36px); --tile-w: calc(100vw - 36px); --landing-card-w: calc(100vw - 36px); } } @media (prefers-reduced-motion: reduce) { :root { --dur-cloud: 0s; --dur-globe: 0s; --dur-settle: 0s; --dur-fly: 0s; } /* IRIS reduced_motion: the clock still ticks */ }