/* =============================================================
   TimeBox / Developer Jamiu — Foundations
   Colors + typography tokens. Semantic tokens live below the base.
   ============================================================= */

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* -----------------------------------------------------------
     Brand palette (from Brand Guidelines - Developer Jamiu)
     ----------------------------------------------------------- */
  --brand-bondi-blue:       #00A3AF;   /* primary */
  --brand-skobeloff:        #00727A;   /* deeper teal */
  --brand-atomic-tangerine: #FFA368;   /* secondary accent */
  --brand-cultured:         #F4F4F4;   /* light surface */
  --brand-chinese-black:    #101010;   /* base ink */

  /* Neutral scale derived from Cultured → Chinese Black
     (used for muted timeline hours, rules, chrome, borders) */
  --neutral-00: #FFFFFF;
  --neutral-05: #FAFAFA;
  --neutral-10: #F4F4F4;   /* = cultured */
  --neutral-15: #EDEDED;
  --neutral-20: #E2E2E2;
  --neutral-30: #CBCBCB;
  --neutral-40: #A8A8A8;
  --neutral-50: #848484;
  --neutral-60: #5F5F5F;
  --neutral-70: #3F3F3F;
  --neutral-80: #262626;
  --neutral-90: #1A1A1A;
  --neutral-95: #141414;
  --neutral-100: #101010;  /* = chinese black */

  /* Tints used sparingly on hover/press, meeting bands, etc. */
  --bondi-tint-08:  rgba(0, 163, 175, 0.08);
  --bondi-tint-16:  rgba(0, 163, 175, 0.16);
  --bondi-tint-24:  rgba(0, 163, 175, 0.24);
  --tangerine-tint-12: rgba(255, 163, 104, 0.12);
  --tangerine-tint-24: rgba(255, 163, 104, 0.24);

  /* -----------------------------------------------------------
     Typography — Satoshi across the board
     ----------------------------------------------------------- */
  --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Base type scale (modular, tuned for an 8px grid) */
  --fs-display-xl: 72px;
  --fs-display-l:  56px;
  --fs-display-m:  44px;
  --fs-h1:         36px;
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-l:     17px;
  --fs-body:       15px;
  --fs-body-s:     13px;
  --fs-caption:    12px;
  --fs-overline:   11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* -----------------------------------------------------------
     Spacing — 8px base grid
     ----------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;

  /* -----------------------------------------------------------
     Radii — cards standardize on 12px
     ----------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* standard card radius */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* -----------------------------------------------------------
     Elevation — soft, one-direction shadows, never showy
     ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 16, 16, 0.04), 0 1px 1px rgba(16, 16, 16, 0.04);
  --shadow-2: 0 2px 4px rgba(16, 16, 16, 0.05), 0 4px 8px rgba(16, 16, 16, 0.04);
  --shadow-3: 0 6px 12px rgba(16, 16, 16, 0.06), 0 12px 24px rgba(16, 16, 16, 0.05);
  --shadow-focus: 0 0 0 3px rgba(0, 163, 175, 0.32);

  /* -----------------------------------------------------------
     Motion
     ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* =============================================================
   Semantic tokens — LIGHT theme (default)
   ============================================================= */
:root,
:root[data-theme="light"] {
  /* Surfaces */
  --surface-canvas:     var(--neutral-10);   /* page background */
  --surface-card:       var(--neutral-00);   /* cards, sheets */
  --surface-raised:     var(--neutral-00);
  --surface-sunken:     var(--neutral-15);
  --surface-inverse:    var(--neutral-100);

  /* Borders */
  --border-subtle:      var(--neutral-20);
  --border-default:     var(--neutral-30);
  --border-strong:      var(--neutral-60);

  /* Foreground */
  --fg-primary:         var(--neutral-100);  /* chinese black */
  --fg-secondary:       var(--neutral-70);
  --fg-muted:           var(--neutral-50);
  --fg-disabled:        var(--neutral-40);
  --fg-inverse:         var(--neutral-00);

  /* Brand-tied semantic */
  --accent-primary:     var(--brand-bondi-blue);
  --accent-primary-hover: #008E99;
  --accent-primary-pressed: #007880;
  --accent-secondary:   var(--brand-atomic-tangerine);
  --accent-secondary-hover: #F58F4F;
  --accent-secondary-pressed: #E07B3D;
  --accent-deep:        var(--brand-skobeloff);

  /* Product-specific: timeline */
  --timeline-current:   var(--brand-bondi-blue);     /* current-time marker */
  --timeline-meeting:   var(--brand-atomic-tangerine); /* overlap band */
  --timeline-meeting-soft: var(--tangerine-tint-24);
  --timeline-daytime:   var(--neutral-00);
  --timeline-night:     var(--neutral-15);           /* muted grey, non-overlap */
  --timeline-gridline:  var(--neutral-20);

  /* Status */
  --status-success: #2F9E6B;
  --status-warning: #E1A93B;
  --status-danger:  #D15454;
  --status-info:    var(--brand-bondi-blue);

  /* Focus */
  --focus-ring:         var(--shadow-focus);
}

/* =============================================================
   Semantic tokens — DARK theme (explicit, not inverted)
   ============================================================= */
:root[data-theme="dark"] {
  --surface-canvas:     var(--neutral-100);
  --surface-card:       var(--neutral-90);
  --surface-raised:     var(--neutral-80);
  --surface-sunken:     #0A0A0A;
  --surface-inverse:    var(--neutral-10);

  --border-subtle:      #262626;
  --border-default:     #333333;
  --border-strong:      #5F5F5F;

  --fg-primary:         var(--neutral-05);
  --fg-secondary:       var(--neutral-30);
  --fg-muted:           var(--neutral-50);
  --fg-disabled:        #3F3F3F;
  --fg-inverse:         var(--neutral-100);

  --accent-primary:     var(--brand-bondi-blue);
  --accent-primary-hover: #33B5BF;
  --accent-primary-pressed: #66C8CF;
  --accent-secondary:   var(--brand-atomic-tangerine);
  --accent-secondary-hover: #FFB789;
  --accent-secondary-pressed: #FFCAA8;
  --accent-deep:        var(--brand-skobeloff);

  --timeline-current:   var(--brand-bondi-blue);
  --timeline-meeting:   var(--brand-atomic-tangerine);
  --timeline-meeting-soft: rgba(255, 163, 104, 0.16);
  --timeline-daytime:   var(--neutral-90);
  --timeline-night:     #0A0A0A;
  --timeline-gridline:  #262626;

  --status-success: #3BB77E;
  --status-warning: #EDBE5C;
  --status-danger:  #E06C6C;
  --status-info:    var(--brand-bondi-blue);
}

/* =============================================================
   Semantic typography classes
   (mirror Flutter TextTheme roles: displayLarge..labelSmall)
   ============================================================= */
.t-display-xl {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.t-display-l {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display-m {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-m);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
}
.t-body-l {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.t-body-s {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.t-overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
/* Time numerals — always tabular, Satoshi Black for weight */
.t-time {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.t-tz-abbrev {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body-s);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* Minimal reset used by preview cards */
.ds-reset, .ds-reset * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html{scroll-behavior:smooth}
[id]{scroll-margin-top:16px}
#story{scroll-margin-top:88px}
#community,#connect{scroll-margin-top:67px}
@media (max-width:800px){
  .nav-sec{display:none !important}
  .talk-row{grid-template-columns:1fr !important;gap:2px !important}
  .talk-venue{text-align:left !important}
}
body{margin:0;background:var(--surface-canvas);font-family:var(--font-sans);transition:background 200ms cubic-bezier(0.2,0,0,1)}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--accent-primary)}
a,button{transition:background-color 120ms cubic-bezier(0.2,0,0,1),color 120ms cubic-bezier(0.2,0,0,1),border-color 120ms cubic-bezier(0.2,0,0,1),box-shadow 200ms cubic-bezier(0.2,0,0,1)}