/* yuyu design tokens v2 · container style (approved mockup, 2026-11-09)
   One role-named set for every workspace. Replaces tokens.css + editorial role layers at rollout.
   Colour rules: grey surfaces, near-black text and primary buttons, pink fill = accent only,
   light pink = selection, dark pink = the only pink used for text. */
:root {
  /* ---- Colour: surfaces ---- */
  --surface-page: #FFFFFF;
  --surface-container: #F2F2F7;
  --surface-raised: #FFFFFF;          /* rows and controls inside containers */
  --surface-hover: #E5E5EA;
  --surface-pressed: #D1D1D6;

  /* ---- Colour: text ---- */
  --text: #1C1C1E;                    /* 17.0:1 on white, 15.3:1 on container */
  --text-secondary: #636366;          /* 6.0:1 on white, 5.4:1 on container */
  --text-on-primary: #FFFFFF;

  /* ---- Colour: primary (near-black) ---- */
  --primary: #1C1C1E;
  --primary-hover: #3A3A3C;
  --primary-pressed: #000000;

  /* ---- Colour: accent (pink) ---- */
  --accent-fill: #EB519F;             /* fills only: progress, FAB, ticks, dots. Never text. */
  --accent-fill-hover: #D94790;
  --accent-selected: #FCE8F2;         /* selected backgrounds */
  --accent-text: #A52C68;             /* the only pink for text: 6.7:1 on white, 5.7:1 on selected */

  /* ---- Colour: status and controls ---- */
  --control-border: #8E8E93;          /* tick and field outlines, 3.3:1 (WCAG 1.4.11) */
  --danger-bg: #FDECEC;
  --danger-text: #A3262E;             /* 6.4:1 on danger-bg */
  --focus-ring: #A52C68;

  /* ---- Colour: areas (Planner categories) ---- */
  --area-razzudazzu: #CF7195;
  --area-razzumatazzu: #C18C80;
  --area-razzulabo: #9B8EC4;
  --area-razzumuze: #86A98F;
  --area-academic: #7C9CC0;
  --area-personal: #D1A35E;

  /* ---- Type ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --type-display-size: 32px;   --type-display-leading: 36px;   /* page title */
  --type-title-size: 26px;     --type-title-leading: 32px;     /* hero title (Focus) */
  --type-figure-size: 24px;    --type-figure-leading: 24px;    /* countdown numbers */
  --type-section-size: 20px;   --type-section-leading: 24px;   /* container headings */
  --type-subhead-size: 17px;   --type-subhead-leading: 22px;   /* sub-headings inside a container */
  --type-body-size: 16px;      --type-body-leading: 22px;
  --type-meta-size: 14px;      --type-meta-leading: 20px;
  --type-small-size: 13px;     --type-small-leading: 18px;     /* smallest text allowed */
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;
  --type-tracking-tight: -.02em;

  /* ---- Space ---- */
  --space-block: 16px;         /* between containers; container padding */
  --space-inner: 12px;         /* heading → content; groups inside a container */
  --space-row: 8px;            /* between rows; between controls in a group */
  --space-hairline: 4px;       /* icon ↔ text, label ↔ value */
  --space-row-inset: 12px;     /* padding inside a row */

  /* ---- Shape ---- */
  --radius-container: 20px;
  --radius-row: 14px;
  --radius-control: 12px;      /* sidebar items, inputs */
  --radius-pill: 999px;
  --radius-round: 50%;
  --border-hairline: 1px;
  --border-strong: 2px;

  /* ---- Size ---- */
  --target: 44px;              /* minimum touch target */
  --target-fab: 56px;
  --icon-size: 22px;
  --icon-size-sm: 16px;
  --check: 26px;

  /* ---- Layout ---- */
  --layout-phone-max: 560px;   /* single column cap on phones */
  --layout-max: 1320px;        /* desktop shell */
  --layout-sidebar: 240px;

  /* ---- Elevation ---- */
  --elevation-float: 0 8px 24px rgb(0 0 0 / .10), 0 0 0 1px var(--surface-hover);   /* floating bars */
  --elevation-fab: 0 2px 6px rgb(235 81 159 / .28);   /* smaller shade (user, 2026-11-13) */

  /* ---- Motion ---- */
  /* Smooth motion (user, 2026-11-14): longer, softly decelerating; nothing continuous. */
  --motion-fast: 160ms;                          /* hover, press, colour changes */
  --motion-base: 280ms;                          /* page change, menus, dialogs opening */
  --motion-slow: 380ms;                          /* sheets from the bottom edge */
  --motion-exit: 200ms;                          /* closing is quicker than opening */
  --motion-ease: cubic-bezier(.22, .61, .36, 1); /* soft ease-out */
  --motion-ease-emphasis: cubic-bezier(.16, 1, .3, 1); /* long, gentle settle for larger moves */
  --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --press-scale: .96;
}

/* iPad and wider */
@media (min-width: 700px) {
  :root {
    --space-block: 20px; --space-inner: 14px; --space-row: 10px; --space-row-inset: 14px;
    --type-title-size: 30px; --type-title-leading: 36px;
  }
}
/* 27" monitor */
@media (min-width: 1800px) {
  :root {
    --space-block: 24px; --space-inner: 16px; --space-row: 12px;
    --layout-max: 1560px; --layout-sidebar: 264px;
    --type-body-size: 17px; --type-body-leading: 24px;
    --type-meta-size: 15px; --type-meta-leading: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-exit: 0ms; --press-scale: 1; }
}