/* plen-tokens v1 */
/*
 * Plen's look as tokens: the colours, radii, shadows and gaps the app draws
 * with (docs/design/PLEN_LOOK_RULES.md, sections 3 and 9). The look is "soft
 * cards": white cards floating on a warm canvas.
 *
 * Names follow the rulebook's roles. Values are the rulebook's, except where
 * Wilbert decided otherwise: --plen-text-muted keeps #6e7378 (D3), and the
 * warm greys are tuned (2026-10-12; docs/design/SOFTLOOK_MAP.md). Until
 * v0.110.0 the app also had its earlier look behind a flag; this block was
 * that look's, with the soft values over it on html.look-soft.
 *
 * The app reads these, and so does the template of shared pages and exports
 * (src/utils/export.js reads this file as text, so the two cannot drift).
 *
 * The website repo keeps an identical copy of this file: a token change is
 * made in one repo and copied byte for byte to the other the same day.
 */
:root {
  /* 3.1 Canvas and surfaces. The warm greys sit at one hue, about 80 in CIE
     LCh: the rulebook's sat at 90, pure yellow, which reads a little green
     beside white. The canvas is a step lighter; the panels stay pure white
     (Wilbert, 2026-10-12). */
  --plen-canvas: #F7F3EE;
  /* The Dashboard's lower band: the canvas a step darker (Wilbert,
     2026-10-11; warmer and lighter with it, 2026-10-12). */
  --plen-canvas-deep: #EEE9E3;
  --plen-surface: #ffffff;
  --plen-surface-2: #FAF7F4;
  --plen-sunken: var(--plen-canvas);
  --plen-hover: #F4F0EB;
  --plen-pressed: #ECE7E1;
  --plen-chip: #EFEAE4;
  /* Light enough that the day lines show through (Wilbert, 2026-10-12). */
  --plen-weekend: #FBF8F5;
  /* Behind a preview of an export: the export's own page. */
  --plen-paper: #ffffff;
  --plen-paper-surround: var(--plen-canvas);

  /* 3.2 Lines (where hidden weekends close up: the strong line) */
  --plen-line: #F1EDE8;
  --plen-line-strong: #E6E1DA;
  --plen-line-gap: var(--plen-line-strong);
  --plen-line-dashed: #E5DFD8;
  --plen-control-ring: #D1CAC2;

  /* 3.3 Text */
  --plen-text-strong: #16181F;
  --plen-text: #474A53;
  --plen-text-secondary: #62646C;
  /* AA pass (Stage 7): #6e7378 is ~4.8:1 on white, so 10-12px hint text
     stays readable (D3). */
  --plen-text-muted: #6e7378;
  --plen-text-placeholder: #8E9096;
  /* A timer that is assigned but not running. */
  --plen-text-faint: #999999;
  /* A column value Plen worked out rather than one typed in. */
  --plen-text-derived: #aaaaaa;
  /* Text on a filled button, and a box's hours. */
  --plen-on-fill: #ffffff;
  --plen-on-fill-soft: rgba(255, 255, 255, 0.9);

  /* 3.4 Accent and states: hover 6% darker, pressed 12% (rulebook 4.7);
     focus is a 2px ring at 40%, 1px off the control. */
  --plen-accent: #4A90D9;
  --plen-accent-hover: #4687CC;
  --plen-accent-pressed: #417FBF;
  --plen-accent-edge: rgba(74, 144, 217, 0.9);
  --plen-accent-tint-5: rgba(74, 144, 217, 0.05);
  --plen-accent-tint-6: rgba(74, 144, 217, 0.06);
  --plen-accent-tint-8: rgba(74, 144, 217, 0.08);
  --plen-accent-tint-10: rgba(74, 144, 217, 0.1);
  --plen-accent-tint-12: rgba(74, 144, 217, 0.12);
  --plen-accent-tint-18: rgba(74, 144, 217, 0.18);
  --plen-focus-ring: 0 0 0 1px var(--plen-surface), 0 0 0 3px var(--plen-focus-color);
  --plen-focus-ring-wide: 0 0 0 1px var(--plen-surface), 0 0 0 3px var(--plen-focus-color);
  --plen-focus-ring-edit: 0 0 0 1px var(--plen-surface), 0 0 0 3px var(--plen-focus-color);
  --plen-focus-color: rgba(74, 144, 217, 0.4);
  --plen-danger: #E74C3C;
  --plen-danger-hover: #D94738;
  --plen-danger-pressed: #CB4335;
  --plen-danger-deep: #C0392B;
  --plen-danger-tint: rgba(231, 76, 60, 0.08);
  --plen-danger-tint-strong: rgba(231, 76, 60, 0.14);
  --plen-danger-line: rgba(231, 76, 60, 0.4);
  --plen-warning: #C0792A;
  --plen-warning-tint: rgba(192, 121, 42, 0.14);
  --plen-notice: #E67E22;
  --plen-notice-tint: #fef5e7;
  --plen-success: #27AE60;
  --plen-success-hover: #219a52;
  --plen-success-ink: #1e8a4c;
  --plen-success-tint: rgba(39, 174, 96, 0.12);
  --plen-presence: #2EAD5B;
  /* State, not decoration: selection, drop targets, the running timer. */
  --plen-selection: rgba(180, 180, 180, 0.8);
  --plen-selection-row: rgba(160, 165, 170, 0.85);
  --plen-drop-tint: rgba(59, 130, 246, 0.1);
  --plen-drop-ring: rgba(59, 130, 246, 0.4);
  --plen-timer-ring: #333333;
  --plen-ink-tint-6: rgba(0, 0, 0, 0.06);
  /* How strongly a project's header row is tinted with the project's
     colour, in the timeline (a step stronger: Wilbert, 2026-10-12). */
  --plen-project-tint: 0.1;
  --plen-group-tint: rgba(0, 0, 0, 0.03);
  --plen-subgroup-tint: rgba(0, 0, 0, 0.015);
  /* The dark hint bubble (a tooltip, kept as it is). */
  --plen-tooltip: #1A1D23;

  /* Drawn controls: a select's chevron, a checkbox's tick and its
     partly-checked dash. Inline SVG, so no request. */
  --plen-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%2362646C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --plen-check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.5-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --plen-check-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* 5 Colour fills (swatches, bars, event chips, dots): a gloss, at the
     strength Wilbert preferred (2026-10-12), top to bottom on a long fill
     and from the top-left corner on a square one (a swatch, an event icon,
     a dot, a ticked checkbox). Swatches without their rim or outline, event
     chips without their shadow; hover and selection keep theirs. Nothing in
     the planner casts a shadow under the pointer: a bar or an event icon
     shows it can be grabbed by its cursor (Wilbert, 2026-10-12). */
  --plen-gloss: linear-gradient(to bottom, rgba(255, 255, 255, 0.30), transparent);
  --plen-gloss-diagonal: linear-gradient(135deg, rgba(255, 255, 255, 0.30), transparent);
  --plen-swatch-rim: transparent;
  --plen-swatch-edge: transparent;
  --plen-shadow-chip: none;
  --plen-shadow-chip-hover: none;
  --plen-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  /* 3.5 Shadows: one for cards, one for what floats (menus, dialogs,
     popovers, the toast). The dark hint bubble keeps its own. The
     rulebook's 1px ring at 3.5 to 6% is left out: Wilbert read it as an
     outline, and the rulebook says that ring goes first (2026-10-11). */
  --plen-shadow-card: 0 1px 2px rgba(40, 30, 15, 0.04), 0 6px 20px rgba(40, 30, 15, 0.05);
  --plen-shadow-raised: 0 1px 2px rgba(40, 30, 15, 0.07);
  --plen-shadow-pop: 0 10px 30px rgba(40, 30, 15, 0.12);
  --plen-shadow-hover: none;
  /* The label column's edge: the chart slides under it. */
  --plen-shadow-seam: 3px 0 4px -2px rgba(0, 0, 0, 0.10);
  --plen-shadow-modal: var(--plen-shadow-pop);
  --plen-shadow-welcome: var(--plen-shadow-pop);
  --plen-shadow-guide: var(--plen-shadow-pop);
  --plen-shadow-picker: var(--plen-shadow-pop);
  --plen-shadow-popover: var(--plen-shadow-pop);
  --plen-shadow-tooltip: 0 4px 14px rgba(0, 0, 0, 0.18);
  --plen-shadow-toast: var(--plen-shadow-pop);

  /* Behind dialogs and the phone's drawers: tinted warm; the blur stays
     (D7). */
  --plen-scrim: rgba(30, 25, 15, 0.3);
  --plen-scrim-share: rgba(30, 25, 15, 0.5);
  --plen-scrim-deep: rgba(30, 25, 15, 0.45);
  --plen-scrim-welcome: rgba(30, 25, 15, 0.45);
  --plen-scrim-drawer: rgba(30, 25, 15, 0.25);

  /* 3.6 Radii */
  --plen-r-card: 14px;
  --plen-r-box: 10px;
  --plen-r-control: 8px;
  --plen-r-pill: 999px;
  --plen-r-swatch: 5px;
  --plen-r-check: 4px;
  --plen-r-bar: 6px;
  --plen-r-chip: 6px;

  /* 3.7 Spacing. The header's height is the phone's here; the desktop's is
     the block after this one. */
  --plen-gap: 12px;
  --plen-card-pad: 12px;
  --plen-header-h: 44px;
}

/* 3.7 Spacing, on desktop. The header is its pills plus the gap above them,
   so every gap around the pills and the cards is the same 12px (Wilbert,
   2026-10-12; D9 had 52px). The phone's top bar keeps its own. */
html:not(.is-mobile) {
  --plen-header-h: 46px;
}