/* ─────────────────────────────────────────────────────────────────
   Floppy Design System — Foundations
   Built on iOS 26 / iPadOS 26. Simplicity Design.
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "SF Pro";
  src: local("SF Pro Text"), local("-apple-system"), local("BlinkMacSystemFont");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ───── Brand ───── */
  --floppy-accent: #FF424B;        /* Floppy red — primary */
  --floppy-accent-2: #0091FF;      /* iOS blue */
  --floppy-tint: #007AFF;

  /* ───── System colors (Light) ───── */
  --sys-red:    rgb(255, 56, 60);
  --sys-orange: rgb(255, 149,   0);
  --sys-yellow: rgb(255, 204,   0);
  --sys-green:  rgb( 52, 199,  89);
  --sys-mint:   rgb(  0, 199, 190);
  --sys-teal:   rgb( 48, 176, 199);
  --sys-cyan:   rgb( 50, 173, 230);
  --sys-blue:   rgb(  0, 122, 255);
  --sys-indigo: rgb( 88,  86, 214);
  --sys-purple: rgb(175,  82, 222);
  --sys-pink:   rgb(255,  45,  85);
  --sys-brown:  rgb(162, 132,  94);

  /* Dark variants */
  --sys-red-d:    rgb(255,  66,  69);
  --sys-orange-d: rgb(255, 159,  10);
  --sys-yellow-d: rgb(255, 214,  10);
  --sys-green-d:  rgb( 48, 209,  88);
  --sys-mint-d:   rgb(102, 212, 207);
  --sys-teal-d:   rgb( 64, 200, 224);
  --sys-cyan-d:   rgb(100, 210, 255);
  --sys-blue-d:   rgb( 10, 132, 255);
  --sys-indigo-d: rgb( 94,  92, 230);
  --sys-purple-d: rgb(191,  90, 242);
  --sys-pink-d:   rgb(255,  55,  95);
  --sys-brown-d:  rgb(172, 142, 104);

  /* ───── Grays ───── */
  --gray:    rgb(142, 142, 147);
  --gray-2:  rgb(174, 174, 178);
  --gray-3:  rgb(199, 199, 204);
  --gray-4:  rgb(209, 209, 214);
  --gray-5:  rgb(229, 229, 234);
  --gray-6:  rgb(242, 242, 247);

  /* ───── Labels (text, on light) ───── */
  --label:           rgb(0, 0, 0);
  --label-secondary: rgba(60, 60, 67, 0.60);
  --label-tertiary:  rgba(60, 60, 67, 0.30);
  --label-quaternary:rgba(60, 60, 67, 0.18);

  /* Fills (overlay tints) */
  --fill-1: rgba(120, 120, 128, 0.20);
  --fill-2: rgba(120, 120, 128, 0.16);
  --fill-3: rgba(118, 118, 128, 0.12);
  --fill-4: rgba(116, 116, 128, 0.08);

  /* Backgrounds */
  --bg:           rgb(255, 255, 255);
  --bg-secondary: rgb(242, 242, 247);
  --bg-tertiary:  rgb(255, 255, 255);

  /* Grouped backgrounds (lists) */
  --bg-grouped:           rgb(242, 242, 247);
  --bg-grouped-secondary: rgb(255, 255, 255);
  --bg-grouped-tertiary:  rgb(242, 242, 247);

  /* Separator */
  --separator:        rgba(60, 60, 67, 0.36);
  --separator-opaque: rgb(198, 198, 200);

  /* ───── Type system (Apple Dynamic Type, default sizes) ───── */
  --font-sans: "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-rounded: "SF Pro Rounded", "SF Compact Rounded", "SF Pro", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;

  /* sizes / line heights / letter-spacing per Apple HIG */
  --t-large-title: 700 34px/41px var(--font-sans);
  --t-title-1:     700 28px/34px var(--font-sans);
  --t-title-2:     700 22px/28px var(--font-sans);
  --t-title-3:     600 20px/25px var(--font-sans);
  --t-headline:    600 17px/22px var(--font-sans);
  --t-body:        400 17px/22px var(--font-sans);
  --t-callout:     400 16px/21px var(--font-sans);
  --t-subheadline: 400 15px/20px var(--font-sans);
  --t-footnote:    400 13px/18px var(--font-sans);
  --t-caption-1:   400 12px/16px var(--font-sans);
  --t-caption-2:   400 11px/13px var(--font-sans);

  /* ───── Spacing (4-pt grid) ───── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ───── Radii ───── */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 9999px;
  --r-card: 14px;
  --r-sheet: 22px;

  /* ───── Shadows / Elevation ───── */
  --shadow-knob:  0 6px 13px rgba(0,0,0,0.12), 0 0.5px 4px rgba(0,0,0,0.12);
  --shadow-card:  0 4px 16px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow-sheet: 0 24px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  --shadow-glass: inset 0 0 0 0.5px rgba(255,255,255,0.30), 0 8px 24px rgba(0,0,0,0.12);

  /* ───── Materials (Liquid Glass / iOS 26) ───── */
  --mat-ultrathin: rgba(255,255,255,0.40);
  --mat-thin:      rgba(255,255,255,0.55);
  --mat-regular:   rgba(255,255,255,0.72);
  --mat-thick:     rgba(255,255,255,0.85);

  --mat-ultrathin-d: rgba(28,28,30,0.40);
  --mat-thin-d:      rgba(28,28,30,0.55);
  --mat-regular-d:   rgba(28,28,30,0.72);
  --mat-thick-d:     rgba(28,28,30,0.85);

  --blur-mat: saturate(180%) blur(24px);

  /* Motion */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS spring-feel */
  --ease-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --label:           rgb(255, 255, 255);
    --label-secondary: rgba(235, 235, 245, 0.60);
    --label-tertiary:  rgba(235, 235, 245, 0.30);
    --label-quaternary:rgba(235, 235, 245, 0.18);

    --bg:           rgb(0, 0, 0);
    --bg-secondary: rgb(28, 28, 30);
    --bg-tertiary:  rgb(44, 44, 46);

    --bg-grouped:           rgb(0, 0, 0);
    --bg-grouped-secondary: rgb(28, 28, 30);
    --bg-grouped-tertiary:  rgb(44, 44, 46);

    --separator:        rgba(84, 84, 88, 0.65);
    --separator-opaque: rgb(56, 56, 58);

    --gray-6: rgb(28, 28, 30);
    --gray-5: rgb(44, 44, 46);
    --gray-4: rgb(58, 58, 60);
  }
}

/* ───── Semantic element styles ───── */
html, body {
  font: var(--t-body);
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-large-title); letter-spacing: 0.37px; margin: 0; }
h2 { font: var(--t-title-1);     letter-spacing: 0.36px; margin: 0; }
h3 { font: var(--t-title-2);     letter-spacing: 0.35px; margin: 0; }
h4 { font: var(--t-title-3);     letter-spacing: 0.38px; margin: 0; }
h5 { font: var(--t-headline);    letter-spacing: -0.43px; margin: 0; }
p  { font: var(--t-body);        letter-spacing: -0.43px; margin: 0; }

small { font: var(--t-footnote); color: var(--label-secondary); }
code, pre { font: 400 13px/18px var(--font-mono); }

/* helpers */
.t-large-title { font: var(--t-large-title); letter-spacing: 0.37px; }
.t-title-1     { font: var(--t-title-1); letter-spacing: 0.36px; }
.t-title-2     { font: var(--t-title-2); letter-spacing: 0.35px; }
.t-title-3     { font: var(--t-title-3); letter-spacing: 0.38px; }
.t-headline    { font: var(--t-headline); letter-spacing: -0.43px; }
.t-body        { font: var(--t-body); letter-spacing: -0.43px; }
.t-callout     { font: var(--t-callout); letter-spacing: -0.32px; }
.t-subheadline { font: var(--t-subheadline); letter-spacing: -0.23px; }
.t-footnote    { font: var(--t-footnote); letter-spacing: -0.08px; }
.t-caption-1   { font: var(--t-caption-1); letter-spacing: 0px; }
.t-caption-2   { font: var(--t-caption-2); letter-spacing: 0.07px; }