/* ============================================================
   Flytabs Design System — tokens.css
   Foundation + component tokens (Polaris-inspired).
   ============================================================ */

:root {
  /* ==========================================================
     FOUNDATION TOKENS
     ========================================================== */

  /* ---------- Spacing (13-step) ---------- */
  --spacing-01: 0.125rem;  /* 2 */
  --spacing-02: 0.25rem;   /* 4 */
  --spacing-03: 0.5rem;    /* 8 */
  --spacing-04: 0.75rem;   /* 12 */
  --spacing-05: 1rem;      /* 16 */
  --spacing-06: 1.5rem;    /* 24 */
  --spacing-07: 2rem;      /* 32 */
  --spacing-08: 2.5rem;    /* 40 */
  --spacing-09: 3rem;      /* 48 */
  --spacing-10: 4rem;      /* 64 */
  --spacing-11: 5rem;      /* 80 */
  --spacing-12: 6rem;      /* 96 */
  --spacing-13: 10rem;     /* 160 */

  /* Fluid spacing */
  --fluid-spacing-01: 0;
  --fluid-spacing-02: 2vw;
  --fluid-spacing-03: 5vw;
  --fluid-spacing-04: 10vw;

  /* ---------- Radius scale ---------- */
  --radius-00: 0;
  --radius-01: 2px;
  --radius-02: 4px;
  --radius-03: 6px;
  --radius-04: 8px;
  --radius-05: 12px;
  --radius-06: 16px;
  --radius-full: 9999px;

  /* ---------- Containers (legacy, used in plate.css) ---------- */
  --container-01: 1.5rem;   /* 24 */
  --container-02: 2rem;     /* 32 */
  --container-03: 2.5rem;   /* 40 */
  --container-04: 3rem;     /* 48 */
  --container-05: 4rem;     /* 64 */

  /* ---------- Layout chrome ---------- */
  --topbar-height: 48px;
  --page-prose-max-width: 640px;

  /* ---------- Icon sizes ---------- */
  --icon-size-01: 1rem;     /* 16 */
  --icon-size-02: 1.25rem;  /* 20 */

  /* ---------- Motion: durations ---------- */
  --duration-fast-01: 70ms;
  --duration-fast-02: 110ms;
  --duration-moderate-01: 150ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01: 400ms;
  --duration-slow-02: 700ms;

  /* ---------- Motion: easings ---------- */
  --ease-standard-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-standard-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance-productive: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-entrance-expressive: cubic-bezier(0, 0, 0.3, 1);
  --ease-exit-productive: cubic-bezier(0.2, 0, 1, 0.9);
  --ease-exit-expressive: cubic-bezier(0.4, 0.14, 1, 1);

  /* ---------- Z-index ---------- */
  --z-dropdown: 9000;
  --z-modal: 9100;
  --z-toast: 9200;
  --z-overlay: 9300;
  --z-tooltip: 9400;

  /* ---------- Layout breakpoints (for reference) ---------- */
  --bp-sm: 320px;
  --bp-md: 672px;
  --bp-lg: 1056px;
  --bp-xlg: 1312px;
  --bp-max: 1584px;

  /* ==========================================================
     COMPONENT TOKENS
     ========================================================== */

  /* ---------- Button ---------- */
  --btn-height-sm: 28px;
  --btn-height-md: 32px;
  --btn-height-lg: 40px;
  --btn-height-xl: 48px;
  --btn-padding-sm: 0 10px;
  --btn-padding-md: 0 14px;
  --btn-padding-lg: 0 16px;
  --btn-padding-xl: 0 24px;
  --btn-font-sm: 500 12px/1 var(--font-family-sans);
  --btn-font-md: 500 13px/1 var(--font-family-sans);
  --btn-font-lg: 500 14px/1 var(--font-family-sans);
  --btn-font-xl: 500 14px/1 var(--font-family-sans);
  --btn-radius: var(--radius-04);
  --btn-gap: 8px;
  --btn-icon-size: 16px;
  --btn-letter-spacing: 0.16px;
  --btn-transition: background var(--duration-fast-02) var(--ease-standard-productive),
                     border-color var(--duration-fast-02) var(--ease-standard-productive),
                     color var(--duration-fast-02) var(--ease-standard-productive);

  /* ---------- Input / Field ---------- */
  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;
  --input-padding-x: 12px;
  --input-font: 400 14px/1 var(--font-family-sans);
  --input-radius: var(--radius-04);
  --input-border-width: 1px;
  --input-focus-ring: 0 0 0 1px var(--color-border-focus);
  --input-letter-spacing: 0.16px;

  /* ---------- Textarea ---------- */
  --textarea-padding: var(--spacing-03) var(--input-padding-x);
  --textarea-font: 400 14px/1.4 var(--font-family-sans);
  --textarea-radius: var(--input-radius);
  --textarea-min-height: 80px;

  /* ---------- Card ---------- */
  --card-radius: var(--radius-05);
  --card-padding: 16px;
  --card-gap: 12px;
  --card-border: 1px solid var(--color-border);
  --card-hover-border: var(--color-border-brand);
  --card-hover-shadow: var(--shadow-400);
  --card-transition: border-color var(--duration-fast-02) var(--ease-standard-productive),
                     box-shadow var(--duration-moderate-01) var(--ease-standard-productive);

  /* ---------- Card cover (thumbnail area) ---------- */
  --card-cover-height: 180px;
  --card-cover-padding: 14px;

  /* ---------- Modal / Dialog ---------- */
  --modal-radius: var(--radius-05);
  --modal-width: min(920px, 92vw);
  --modal-max-height: 86vh;
  --modal-padding-x: 24px;
  --modal-padding-y: 20px;
  --modal-header-font: 400 20px/1.4 var(--font-family-sans);
  --modal-shadow: var(--shadow-600);
  --modal-footer-padding-y: 12px;
  --modal-footer-padding-x: 16px;

  /* ---------- Menu / Dropdown ---------- */
  --menu-radius: var(--radius-04);
  --menu-padding-y: 4px;
  --menu-item-height: 40px;
  --menu-item-padding: 0 16px;
  --menu-item-font: 400 14px var(--font-family-sans);
  --menu-shadow: var(--shadow-400);

  /* ---------- Chip / Tag ---------- */
  --chip-height: 20px;
  --chip-padding: 0 6px;
  --chip-font: 500 11px/1 var(--font-family-sans);
  --chip-radius: var(--radius-02);
  --chip-letter-spacing: 0.32px;

  /* ---------- Badge ---------- */
  --badge-height: 18px;
  --badge-padding: 0 5px;
  --badge-font: 500 10px/1 var(--font-family-sans);
  --badge-radius: var(--radius-01);
  --badge-letter-spacing: 0.32px;

  /* ---------- Avatar ---------- */
  --avatar-size-sm: 22px;
  --avatar-size-md: 32px;
  --avatar-size-lg: 40px;
  --avatar-font-sm: 600 10px var(--font-family-sans);
  --avatar-font-md: 600 13px var(--font-family-sans);
  --avatar-radius: var(--radius-full);

  /* ---------- Tabs ---------- */
  --tab-height: 40px;
  --tab-padding: 0 16px;
  --tab-font: 500 14px var(--font-family-sans);
  --tab-indicator: 2px;
  --tab-letter-spacing: 0.16px;

  /* ---------- Segmented control ---------- */
  --seg-height-sm: 32px;
  --seg-height-md: 36px;
  --seg-radius: var(--radius-04);
  --seg-padding: 0 14px;
  --seg-font: 500 13px var(--font-family-sans);
  --seg-font-sm: 500 12px var(--font-family-sans);
  --seg-letter-spacing: 0.16px;

  /* ---------- Tooltip ---------- */
  --tooltip-radius: var(--radius-03);
  --tooltip-padding: 4px 8px;
  --tooltip-font: 400 12px var(--font-family-sans);

  /* ---------- Toast / Notification ---------- */
  --toast-radius: var(--radius-04);
  --toast-padding: 12px 16px;
  --toast-font: 400 14px/1.4 var(--font-family-sans);
  --toast-shadow: var(--shadow-400);
}