/* =========================================================================
   Certified Camera — Design Tokens
   Single source of truth for colour, type, spacing, radius, elevation, motion.
   Import once at the top of every HTML/JSX entry point.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Colour: surfaces (dark-first) ----- */
  --bg-shutter: #000000;        /* viewfinder. true black. */
  --bg-app: #0E0E0E;            /* gallery, settings background */
  --surface-1: #1A1A1B;         /* chrome bars, control wells */
  --surface-2: #262627;         /* cards, modal sheets, list rows */
  --surface-3: #343436;         /* pressed state on surfaces */

  /* ----- Colour: foreground ----- */
  --fg-1: #F2F0EB;              /* primary text. warm off-white, not pure */
  --fg-2: #A3A09A;              /* secondary, labels, units */
  --fg-3: #6E6B66;              /* tertiary, disabled, hint */
  --hairline: rgba(242, 240, 235, 0.08);

  /* ----- Colour: signal & status ----- */
  --signal: #F4D03F;            /* the only chromatic colour. REC, focus, primary CTA */
  --signal-pressed: #D4B22F;
  --signal-on-fg: #1A1500;      /* text laid on signal yellow */
  --danger: #E5484D;            /* recording dot, destructive */
  --success: #4CC38A;           /* save confirmation */

  /* ----- Colour: light mode (editor preview, print docs only) ----- */
  --light-bg: #F7F5F0;
  --light-surface: #FFFFFF;
  --light-fg-1: #1A1A1B;
  --light-fg-2: #56534E;
  --light-hairline: rgba(26, 26, 27, 0.10);

  /* ----- Typography: families ----- */
  --font-sans: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Typography: scale (size / line-height) ----- */
  --type-display: 700 40px/44px var(--font-sans);
  --type-h1:      600 28px/32px var(--font-sans);
  --type-h2:      600 20px/24px var(--font-sans);
  --type-h3:      500 16px/20px var(--font-sans);
  --type-body:    400 15px/22px var(--font-sans);
  --type-label:   500 13px/16px var(--font-sans);
  --type-caption: 400 11px/14px var(--font-sans);
  --type-readout:    500 14px/14px var(--font-mono);
  --type-readout-lg: 500 22px/22px var(--font-mono);

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-meta: 0.04em;     /* uppercase labels */

  /* ----- Spacing (4px base) ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ----- Radii ----- */
  --r-sharp: 0;                 /* edge-of-screen chrome */
  --r-thumb: 4px;               /* photo thumbnails */
  --r-button: 12px;
  --r-card: 16px;
  --r-pill: 9999px;

  /* ----- Elevation (max two layered shadows) ----- */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.6);
  --elev-2: 0 12px 32px rgba(0,0,0,0.55);

  /* ----- Protection gradient (chrome over live imagery) ----- */
  --gradient-top:    linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 100%);
  --gradient-bottom: linear-gradient(to top,    rgba(0,0,0,0.55), transparent 100%);

  /* ----- Motion ----- */
  --ease-precision: cubic-bezier(0.2, 0, 0, 1);
  --ease-ios-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-instant: 80ms;
  --dur-press:   120ms;
  --dur-mode:    220ms;
  --dur-sheet:   320ms;

  /* ----- Sizes (camera-specific) ----- */
  --shutter-d: 76px;            /* shutter button diameter */
  --shutter-ring: 4px;          /* outer ring */
  --hit-min: 44px;              /* minimum tap target */
}

/* =========================================================================
   Semantic element styles — apply automatically when the host page sets
   the body font + colour. Pages may also use these via class names.
   ========================================================================= */

.cf-body, body.certified {
  background: var(--bg-app);
  color: var(--fg-1);
  font: var(--type-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum", "ss01";  /* tabular nums + alt ones in JetBrains */
}

.cf-display { font: var(--type-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cf-h1      { font: var(--type-h1);      letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cf-h2      { font: var(--type-h2);      color: var(--fg-1); }
.cf-h3      { font: var(--type-h3);      color: var(--fg-1); }
.cf-body-t  { font: var(--type-body);    color: var(--fg-1); }
.cf-label   { font: var(--type-label);   color: var(--fg-2); }
.cf-caption { font: var(--type-caption); color: var(--fg-3); }

.cf-meta {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: var(--fg-2);
}

.cf-readout    { font: var(--type-readout);    color: var(--fg-1); font-feature-settings: "tnum"; }
.cf-readout-lg { font: var(--type-readout-lg); color: var(--fg-1); font-feature-settings: "tnum"; }
.cf-readout .unit, .cf-readout-lg .unit { color: var(--fg-2); margin-left: 4px; }

/* =========================================================================
   Reset bits — minimal, only what every Certified page needs.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--signal-on-fg); }