/* Memo design tokens, extracted from the approved mockup
   (https://claude.ai/artifact/MKLmaVpPbN99Mh8kgdpow5) and the torrhes brand tokens
   (torrhes_site/brand/tokens/brand-tokens.css, Option C, 2026-09-28).
   Only this file holds values. Components use the --m-* names; views use components. */

:root {
  /* Surfaces and text (torrhes Cloud, Stone, Volcanic) */
  --m-bg:            #FAF6F0;   /* Cloud: page ground */
  --m-surface:       #FFFFFF;   /* cards, inputs, tab bar */
  --m-surface-alt:   #F5EDE2;   /* Stone: tag chips, "Resultado" box, preview placeholder */
  --m-text:          #2D303E;   /* Volcanic: 12.2:1 on Cloud */
  --m-text-soft:     #4C4E59;   /* 7.7:1 on Cloud: meta, labels, secondary actions */
  --m-line:          #E6E2DE;

  /* Actions */
  --m-action:        #2363E1;   /* Cornflower Deep: buttons, links, planned, active tab (4.95:1) */
  --m-action-soft:   #EAF0FD;   /* selected chip background, active nav item */
  --m-on-action:     #FFFFFF;
  --m-done:          #2E7D4F;   /* done check and "Hecho" action (4.9:1 on white) */
  --m-sync-ok:       #2E7D4F;
  --m-sync-pending:  #C9C444;   /* Olive, dot only, never text on light */
  --m-error:         #B3261E;   /* errors (text, border, icon): 6.54:1 on white, 6.07:1 on Cloud, 5.63:1 on Stone */

  /* Preview placeholders */
  --m-media-dark:    #2D303E;   /* video thumbnail block */

  /* Type */
  --m-font-display:  'Inria Serif', Georgia, 'Times New Roman', serif;   /* "Memo" wordmark, screen titles 28px/700 */
  --m-font-body:     'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m-font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;   /* API tokens, commands */
  --m-fs-title:      28px;
  --m-fs-body:       15px;
  --m-fs-card:       14px;      /* card titles, 600 */
  --m-fs-meta:       12px;      /* domain, time, labels (700 uppercase, 0.6px tracking) */
  --m-fs-nav:        11px;
  --m-lh-body:       1.5;
  --m-lh-tight:      1.35;

  /* Shape */
  --m-radius:        8px;       /* cards, buttons, inputs (torrhes --torrhes-radius-button) */
  --m-radius-media:  6px;
  --m-radius-pill:   18px;
  --m-radius-sheet:  16px;

  /* Spacing (torrhes scale) */
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 24px;
  --m-space-6: 32px;

  /* Controls */
  --m-touch:         44px;      /* minimum tap target; card action row height */
  --m-control:       48px;      /* composer input and primary buttons */
  --m-chip:          36px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-bg:            #1F212B;
    --m-surface:       #2D303E;
    --m-surface-alt:   #3E4150;
    --m-text:          #FAF6F0;
    --m-text-soft:     #C5C3BE;   /* 9:1 on #2D303E */
    --m-line:          #3E4150;
    --m-action:        #8FB0F0;   /* lighter cornflower for text and icons on dark */
    --m-action-soft:   #2A3650;
    --m-on-action:     #1F212B;
    --m-done:          #7CC496;
    --m-sync-ok:       #7CC496;
    --m-error:         #F2B8B5;   /* 7.67:1 on #2D303E, 9.38:1 on #1F212B, 5.92:1 on #3E4150 */
    --m-media-dark:    #FAF6F0;
  }
}
:root[data-theme="dark"] {
  --m-bg:            #1F212B;
  --m-surface:       #2D303E;
  --m-surface-alt:   #3E4150;
  --m-text:          #FAF6F0;
  --m-text-soft:     #C5C3BE;
  --m-line:          #3E4150;
  --m-action:        #8FB0F0;
  --m-action-soft:   #2A3650;
  --m-on-action:     #1F212B;
  --m-done:          #7CC496;
  --m-sync-ok:       #7CC496;
  --m-error:         #F2B8B5;
  --m-media-dark:    #FAF6F0;
}