/*
 * Machine-readable mirror of the live CTAURL UI Specification.
 * The Google Doc is normative; docs/ui-framework.md is the reviewable mirror.
 * Compatibility aliases at the end map older content names to canonical roles.
 */

@import url("./fonts-noto.css");

:root,
[data-theme="bright"] {
  color-scheme: light;

  --font-latin:
    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial,
    sans-serif;
  --font-zh-hk:
    "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --font-ja:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-ko:
    "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-th: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;

  --bg-canvas: #F7F8F4;
  --bg-surface: #FFFFFF;
  --bg-muted: #EEF3EC;
  --bg-raised: #E2F2E8;
  --bg-active: #E2F2E8;
  --bg-hover: #EEF3EC;
  --text-primary: #10221B;
  --text-secondary: #355247;
  --text-muted: #66776E;
  --border-default: #D6E1D8;
  --border: var(--border-default);
  --border-strong: #A9BCAD;

  --brand: #1ED760;
  --brand-hover: #14BE4E;
  --brand-pressed: #0D9D3F;
  --brand-subtle: #DDF7E7;
  --on-brand: #062912;
  --link: #08783B;
  --focus-ring: rgba(30, 215, 96, .34);
  --success: #11884D;
  --warning: #A96300;
  --danger: #B3261E;
  --info: #1665D8;

  --creative-iris: #C4A3B7;
  --on-creative-iris: #28141E;
  --creative-tide: #3B6CA8;
  --on-creative-tide: #FFFFFF;
  --creative-amber: #D89B4A;
  --on-creative-amber: #2A1700;
  --creative-sky: #1E7A9E;
  --on-creative-sky: #FFFFFF;
  --creative-coral: #B85C47;
  --on-creative-coral: #FFFFFF;
  --creative-plum: #7661A6;
  --on-creative-plum: #FFFFFF;
  --creative-berry: #9E4B85;
  --on-creative-berry: #FFFFFF;
  --creative-jade: #287765;
  --on-creative-jade: #FFFFFF;

  --tile-iris: #EEE9E9;
  --tile-tide: #D5DFE6;
  --tile-amber: #F1E7D5;
  --tile-sky: #D0E1E5;
  --tile-coral: #ECDCD5;
  --tile-plum: #E0DDE6;
  --tile-berry: #E7D9E0;
  --tile-jade: #D2E1DA;
  --tile-radius: var(--radius-card);
  --tile-padding: var(--space-6);
  --tile-shadow: var(--shadow-marketing-card);
  --shadow-marketing-card: 0 24px 60px rgba(16,34,27,.12), 0 0 0 1px rgba(16,34,27,.07);

  /* Marketing accents (Slack-pattern): storytelling, blobs, indexes — not primary CTAs */
  --mkt-iris: var(--creative-iris);
  --mkt-tide: var(--creative-tide);
  --mkt-amber: var(--creative-amber);
  --mkt-coral: var(--creative-coral);
  --mkt-plum: var(--creative-plum);
  --mkt-jade: var(--creative-jade);
  --mkt-iris-soft: color-mix(in srgb, var(--creative-iris) 28%, #fff);
  --mkt-tide-soft: color-mix(in srgb, var(--creative-tide) 16%, #fff);
  --mkt-amber-soft: color-mix(in srgb, var(--creative-amber) 22%, #fff);
  --mkt-coral-soft: color-mix(in srgb, var(--creative-coral) 16%, #fff);
  --mkt-plum-soft: color-mix(in srgb, var(--creative-plum) 18%, #fff);

  /* Slack-pattern marketing surfaces (storytelling, not CTAs) */
  --surface-lilac: #F6F0F8;
  --surface-coral-wash: #FBF3F0;
  --surface-amber-wash: #FBF6EE;
  --surface-tide-wash: #F0F4FA;
  --surface-plum-wash: #F3F0F8;
  --surface-mint-wash: #F0FAF3;
  --story-dark: #14101C;
  --story-dark-elevated: #1C1628;
  --on-story: #F7F4FA;
  --on-story-muted: #C9C0D4;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --section-gap-tight: 48px;
  --section-gap-standard: 96px;
  --section-gap-major: 160px;
  --section-pad-panel: 64px;
  --width-narrow: 720px;
  --width-standard: 1200px;

  --radius-workspace-control: 4px;
  --radius-workspace-item: 8px;
  --radius-workspace-record: 12px;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;

  --motion-press: 100ms;
  --motion-hover: 160ms;
  --motion-panel: 220ms;
  --motion-entrance: 320ms;
  --motion-hero: 400ms;
  --motion-stagger: 60ms;
  --motion-stagger-hero: 80ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* Compatibility aliases: values continue to come from canonical roles. */
  --color-canvas: var(--bg-canvas);
  --color-surface: var(--bg-surface);
  --color-surface-muted: var(--bg-muted);
  --color-surface-raised: var(--bg-raised);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --brand-color-primary: var(--brand);
  --brand-color-hover: var(--brand-hover);
  --brand-color-pressed: var(--brand-pressed);
  --brand-color-soft: var(--brand-subtle);
  --brand-color-on: var(--on-brand);
  --brand-color-link: var(--link);
  --canvas: var(--bg-canvas);
  --surface: var(--bg-surface);
  --body: var(--text-primary);
  --brand-ink: var(--link);
  --border-control: var(--border-strong);
  --gap-tight: var(--section-gap-tight);
  --gap-standard: var(--section-gap-standard);
  --gap-major: var(--section-gap-major);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #08110D;
  --bg-surface: #101B15;
  --bg-muted: #142019;
  --bg-raised: #142019;
  --bg-active: #193226;
  --bg-hover: #1D3026;
  --text-primary: #F3F8F3;
  --text-secondary: #C2D0C6;
  --text-muted: #94A39A;
  --border-default: #2A3A31;
  --border: var(--border-default);
  --border-strong: #4B6254;

  --brand: #1ED760;
  --brand-hover: #4BEA7A;
  --brand-pressed: #13AF4A;
  --brand-subtle: #163D27;
  --on-brand: #041B0C;
  --link: #7AF2A2;
  --focus-ring: rgb(122 242 162 / 45%);
  --success: #72E89A;
  --warning: #FFC566;
  --danger: #FF8C88;
  --info: #7BA8FF;

  --creative-iris: #D5B3C9;
  --on-creative-iris: #25121D;
  --creative-tide: #86A9DF;
  --on-creative-tide: #0F1D33;
  --creative-amber: #F2C27B;
  --on-creative-amber: #2B1800;
  --creative-sky: #76BDD4;
  --on-creative-sky: #09202A;
  --creative-coral: #F19A85;
  --on-creative-coral: #32170F;
  --creative-plum: #B9A8E3;
  --on-creative-plum: #1F1738;
  --creative-berry: #E28EC6;
  --on-creative-berry: #2B1026;
  --creative-jade: #78CBB7;
  --on-creative-jade: #09251F;

  --tile-iris: #464B4A;
  --tile-tide: #1D3A46;
  --tile-amber: #4C482A;
  --tile-sky: #143E43;
  --tile-coral: #423629;
  --tile-plum: #2F3745;
  --tile-berry: #3B303C;
  --tile-jade: #173E32;
  --tile-radius: var(--radius-card);
  --tile-padding: var(--space-6);
  --tile-shadow: var(--shadow-marketing-card);

  --surface-lilac: #1A1520;
  --surface-coral-wash: #1F1614;
  --surface-amber-wash: #1F1A12;
  --surface-tide-wash: #121820;
  --surface-plum-wash: #18141F;
  --surface-mint-wash: #101A14;
  --story-dark: #0A0810;
  --story-dark-elevated: #14101C;
  --on-story: #F7F4FA;
  --on-story-muted: #A89BB8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-latin);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-canvas);
}

:lang(zh-HK),
:lang(zh-Hant),
:lang(zh),
:lang(ja),
:lang(ko) {
  line-height: 1.65;
}

:lang(zh-HK),
:lang(zh-Hant),
:lang(zh) {
  font-family: var(--font-zh-hk);
}

:lang(ja) {
  font-family: var(--font-ja);
}

:lang(ko) {
  font-family: var(--font-ko);
}

:lang(th) {
  font-family: var(--font-th);
  line-height: 1.7;
}

.page {
  --gutter: max(0px, calc((100% - var(--width-standard)) / 2));
}

.section {
  padding-block: 0;
}

.section + .section {
  margin-block-start: var(--section-gap-standard);
}

.section + .section.section--tight {
  margin-block-start: var(--section-gap-tight);
}

.section + .section.section--major {
  margin-block-start: var(--section-gap-major);
}

.section[data-section-surface] {
  padding-block: var(--section-pad-panel);
}

.figure-shot {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.figure-shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top left;
}

@media (min-width: 1200px) {
  .figure-shot--bleed-end {
    margin-inline-end: calc(var(--gutter) * -1);
  }
}

[data-reveal="pending"] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--motion-entrance) var(--ease-standard),
    transform var(--motion-entrance) var(--ease-standard);
}

[data-reveal="shown"] {
  opacity: 1;
  transform: none;
}

[data-reveal][style*="--i"] {
  transition-delay: calc(var(--i) * var(--motion-stagger));
}

@media (max-width: 767px) {
  :root,
  [data-theme="bright"] {
    --section-gap-tight: 32px;
    --section-gap-standard: 64px;
    --section-gap-major: 96px;
    --section-pad-panel: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}