/* Composition edit design tokens.
 * Values are measured from the two reference mockups, normalised to a 390px-wide
 * viewport (the mockups are 390pt phone screenshots exported at ~0.53x / ~0.57x).
 * Blade templates must never contain raw colour/size literals — only these vars.
 */
:root {
  /* Colour — palette is shared with the dashboard (.dv2-* in user_dashboard) so
   * the two screens read as one product. Values marked [measured] come from the
   * reference mockups where the dashboard has no equivalent element. */
  --comp-color-bg-page: #F7FAFD;                  /* [dashboard] --dv2-bg-top */
  --comp-color-bg-page-bottom: #EDF3FA;           /* [dashboard] --dv2-bg-bottom */
  --comp-color-bg-save-bar: #EDF3FA;              /* [dashboard] gradient foot */
  --comp-color-surface: #FFFFFF;                  /* [dashboard] --dv2-surface */
  --comp-color-surface-input: #EEF2F7;            /* [dashboard] --dv2-neutral-bg */
  --comp-color-surface-textarea: #F5F8FC;         /* [derived] input fill lightened */
  --comp-color-surface-input-readonly: #F5F7FA;   /* [derived] input fill lightened */
  --comp-color-border-card: #EEF2F7;              /* [dashboard] --dv2-divider */
  --comp-color-border-input: transparent;         /* [measured] filled inputs have no outline */
  --comp-color-border-textarea: #E3EAF3;          /* [derived] one step darker than fill */
  --comp-color-border-input-focus: var(--comp-color-primary);
  --comp-color-border-neutral: #D9DFE7;           /* [derived] ghost-button outline */
  --comp-color-primary: #2E7BF6;                  /* [dashboard] --dv2-primary */
  --comp-color-primary-dark: #1B66DC;             /* [dashboard] --dv2-primary-dark */
  --comp-color-primary-soft: #EAF1FE;             /* [dashboard] --dv2-primary-soft */
  --comp-color-primary-soft-text: var(--comp-color-primary);
  --comp-color-primary-soft-border: #D5E4FD;      /* [derived] soft fill darkened */
  --comp-color-text-primary: #1B2A44;             /* [dashboard] --dv2-text-primary */
  --comp-color-text-secondary: #7C88A0;           /* [dashboard] --dv2-text-secondary */
  --comp-color-text-muted: #A6B0C2;               /* [dashboard] --dv2-text-muted */
  --comp-color-label: #1B2A44;                    /* [dashboard] primary ink */
  --comp-color-text-title: #131A33;               /* [measured] page-title ink, near black */
  --comp-color-alert-bg: #FFEDEC;                 /* [dashboard] --dv2-alert-bg */
  --comp-color-alert-text: #E14B3E;               /* [dashboard] --dv2-alert-text */
  --comp-color-warning-icon: #D98600;             /* [dashboard] --dv2-warning-soft-text */
  --comp-color-track: #E6ECF5;                    /* [dashboard] --dv2-track */
  --comp-color-divider: #EEF2F7;                  /* [dashboard] --dv2-divider */
  --comp-color-toggle-off: #D5DCE6;               /* [derived] track, one step off divider */
  --comp-color-toggle-knob: #FFFFFF;
  --comp-color-focus-ring: rgba(46, 123, 246, 0.2);
  --comp-color-overlay: rgba(27, 42, 68, 0.4);
  --comp-sns-instagram: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
  --comp-sns-x: #111111;
  --comp-sns-youtube: #FF0000;
  --comp-sns-tiktok: #111111;

  /* Radius — dashboard cards are 20px, rows 14px, buttons/badges pills */
  --comp-radius-card: 20px;                       /* [dashboard] --dv2-radius-card */
  --comp-radius-input: 12px;
  --comp-radius-textarea: 14px;                   /* [dashboard] --dv2-radius-row */
  --comp-radius-image: 16px;                      /* [dashboard] --dv2-radius-image, photo hero */
  --comp-radius-row: 14px;                        /* [dashboard] --dv2-radius-row */
  --comp-radius-chip: 999px;
  --comp-radius-button-primary: 999px;            /* [dashboard] --dv2-radius-button */
  --comp-radius-pill: 999px;
  --comp-radius-progress: 999px;
  --comp-radius-icon-badge: 999px;

  /* Shadow — dashboard elevation */
  --comp-shadow-card: 0 2px 12px rgba(27, 42, 68, 0.06);
  --comp-shadow-sticky-footer: 0 -2px 12px rgba(27, 42, 68, 0.06);
  --comp-shadow-button-primary: 0 4px 12px rgba(46, 123, 246, 0.28);

  /* Spacing — container matches the dashboard, field rhythm from the mockups */
  --comp-space-page-x: 16px;                      /* [dashboard] --dv2-space-x */
  --comp-space-card-gap: 16px;                    /* [dashboard] --dv2-gap */
  --comp-space-card-pad: 20px;                    /* [dashboard] --dv2-pad */
  --comp-space-card-head-gap: 20px;
  --comp-space-field-gap: 24px;
  --comp-space-label-to-input: 10px;
  --comp-space-grid-gap: 32px;
  --comp-space-chip-gap: 10px;
  --comp-space-header-gap: 20px;
  --comp-space-page-y: 20px;
  --comp-space-save-bar-y: 12px;
  --comp-space-inline: 12px;
  --comp-space-tight: 8px;
  --comp-space-micro: 6px;
  --comp-space-input-x: 14px;
  --comp-space-date-gap: 8px;
  --comp-page-max-width: 560px;
  --comp-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Typography — [measured] via glyph-advance widths of known strings */
  --comp-font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --comp-font-page-title-size: 24px;
  --comp-font-page-title-weight: 600;
  --comp-font-page-subtitle-size: 13px;
  --comp-font-page-subtitle-weight: 400;
  --comp-font-completion-title-size: 16px;
  --comp-font-completion-title-weight: 700;
  --comp-font-completion-pct-size: 16px;
  --comp-font-completion-pct-weight: 700;
  --comp-font-completion-remain-size: 14px;
  --comp-font-preview-size: 13px;
  --comp-font-preview-weight: 600;
  --comp-font-card-title-size: 17px;
  --comp-font-card-title-weight: 700;
  --comp-font-card-desc-size: 13px;
  --comp-font-card-desc-weight: 400;
  --comp-font-label-size: 15px;
  --comp-font-label-weight: 600;
  --comp-font-input-size: 16px; /* 15px on the comp; 16px avoids iOS focus zoom */
  --comp-font-input-weight: 400;
  --comp-font-placeholder-size: 15px;
  --comp-font-placeholder-weight: 400;
  --comp-font-unit-size: 13px;
  --comp-font-unit-weight: 400;
  --comp-font-chip-size: 14px;
  --comp-font-chip-weight: 500;
  --comp-font-counter-size: 13px;
  --comp-font-counter-weight: 400;
  --comp-font-step-size: 12px;
  --comp-font-step-weight: 600;
  --comp-font-button-size: 16px;
  --comp-font-button-weight: 700;
  --comp-font-help-size: 12px;
  --comp-font-error-size: 13px;
  --comp-font-video-add-size: 14px;
  --comp-line-tight: 1.4;
  --comp-line-body: 1.6;

  /* Control sizes — [measured] on the 390px canvas */
  --comp-size-input-height: 46px;
  --comp-size-button-height: 48px;
  --comp-size-step-circle: 26px;
  --comp-size-progress-height: 6px;
  --comp-size-toggle-width: 40px;
  --comp-size-toggle-height: 22px;
  --comp-size-card-icon: 17px;
  --comp-size-chip-remove: 22px;
  --comp-size-preview-height: 34px;
  --comp-size-chip-height: 30px;
  --comp-size-toggle-knob: 18px;
  --comp-size-form-icon: 18px;
  --comp-size-save-bar-clearance: 92px;
  --comp-size-video-add-height: 38px;
  --comp-radius-form-icon: 6px;
  --comp-size-step-line: 1px;
  --comp-size-focus-ring: 3px;
  --comp-size-select-pad-right: 36px;
  --comp-size-select-chevron: 7px;
  --comp-size-textarea-min: 150px;
  --comp-size-photo-icon: 36px;
  --comp-size-sns-icon: 40px;
  --comp-size-subtitle-measure: 16em;
  --comp-size-measure-unit: 26px;
  --comp-size-toggle-travel: 18px;
  --comp-size-toggle-inset: 2px;
  --comp-font-step-size-narrow: 11px;

  /* Motion / elevation */
  --comp-duration-fast: 150ms;
  --comp-duration-progress: 200ms;
  --comp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --comp-opacity-disabled: 0.4;
  --comp-z-sticky: 20;
  --comp-z-toast: 1100;
  --comp-z-modal: 1200;
  --comp-size-site-header: 55px;
  --comp-size-spinner: 16px;
  --comp-size-thumb: 72px;
}