/* Kikaron brand design tokens — extracted from assets/brands/kikaron/style/all.css
   (the product's canonical :root variables) so the marketing site can reference
   the same accent/border/radii/font values for visual consistency. */

:root {
    --app-colour-activities:     #4A6F95;
    --app-colour-administrator:  #4A6F95;
    --app-colour-app-store:      #1668B8;
    --app-colour-bookmarks:      #7E726A;
    --app-colour-calendar:       orangered;
    --app-colour-configuration:  #1668B8;
    --app-colour-contacts:       #A06430;
    --app-colour-demo:           #4A6F95;
    --app-colour-documents:      rgb(3, 105, 163);
    --app-colour-email:          #0078D4;
    --app-colour-events:         orangered;
    --app-colour-feedback:       #208840;
    --app-colour-help:           #7E726A;
    --app-colour-images:         #C73D78;
    --app-colour-library:        #A06430;
    --app-colour-meetings:       #00C300;
    --app-colour-messages:       #00C300;
    --app-colour-news:           #dd2b4f;
    --app-colour-notifications:  #6E6862;
    --app-colour-password:       #6E6862;
    --app-colour-posts:          #1668B8;
    --app-colour-preferences:    #4A6F95;
    --app-colour-profile:        #6E6862;
    --app-colour-reminders:      #4A6F95;
    --app-colour-search:         #6E6862;
    --app-colour-setup:          #4A6F95;
    --app-colour-streams:        #4A6F95;
    --app-colour-todo:           #4A6F95;
    --app-colour-updates:        #7B5EA0;
    --app-colour-workspaces:     #4A6F95;
    --app-colour-jahrzeit:       black;

    --pat-container-width:  calc(1140px - 3rem);

    /* Fully round the "bookmarked" section icon disc (defaults to the shared
       --border-radii elsewhere). */
    --item-selector-bookmarked-icon-radius: 50%;

    --glyph-spinner: var(--glyph-kikaron);
    /* Throbber: a translucent white glyph with a dark outline so the spinner
       reads on both light and dark app backgrounds. */
    --pat-throbber-colour: rgba(255, 255, 255, 0.3);
    --pat-throbber-text-stroke: rgba(0, 0, 0, 0.3);

    /* Login splash shows the Kikaron wordmark (see --login-panel-logo-image
       below), not the faded swirl glyph — turn the glyph off. */
    --login-panel-icon: none;

    --colour-accent: #F37021;
    --color-accent-hover: #ff6a07;
    --colour-link: #374151; 
    --colour-link-hover: #0b1118;
    --colour-kikaron-light: rgba(234, 108, 26, 0.12);
    --colour-kikaron-light-hover: rgba(234, 109, 26, 0.211);
    --colour-kikaron-background: #e9e9e3;
    --colour-kikaron-background-hover: #e1e1d9;
    --kikaron-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    --kikaron-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.2);
    --kikaron-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.10);
    --colour-kikaron-sand: #F6F1EA;

    /* Base surfaces — warm off-white body, white header */
    --colour-base: var(--colour-kikaron-sand);
    --colour-base-light: #ffffff;
    --colour-canvas: var(--colour-base);
    --colour-base-background: #FAFAF8;
    --body-bg: #FAFAF8;
    --body-font-colour: #1a1a1a;
    --body-font-family: 'Inter', sans-serif;

    --global-header-box-shadow-size: 8px;
    --global-header-box-shadow-intensity: 4%;

    /* Post */

    --post-avatar-corner-border-radius: var(--border-radii);

    /* Page head */
    --page-head-icon-margin-top: 2px; 

    /* Headers */
    --pat-rich-header-level-1-font-family: 'TeX Gyre Pagella', 'Bellefair', 'Noto Naskh Arabic', serif;
    /* --pat-rich-header-level-1-font-weight: 700; */
    --pat-rich-header-level-1-font-size: 2.25rem;
    --pat-rich-header-level-1-line-height: 2.7rem;
    --pat-rich-header-level-2-font-family: 'TeX Gyre Pagella', 'Bellefair', 'Noto Naskh Arabic', serif;
    /* --pat-rich-header-level-2-font-weight: 700; */
    --pat-rich-header-level-2-font-size: 1.75rem;
    --pat-rich-header-level-2-line-height: 2rem;

    /* Text */
    --colour-primary: #374151;
    --colour-ink-light: #e4e4e7;
    --colour-ink-medium: #a1a1aa;
    --colour-ink-dark: #52525b;
    --colour-ink-darkest: #1a1a1a;
    --colour-byline: #9e9eae;

    /* Well headers — use Kikaron accent orange */
    --well-headers: var(--colour-accent);                
    --pat-well-well-header-font-family: 'TeX Gyre Pagella', 'Bellefair', 'Noto Naskh Arabic', serif;
    --pat-well-well-header-font-weight: 700;

    /* Links & accents */
    --colour-accent-text: #ffffff;
    --colour-accent-auto-contrast: #ffffff;
    --colour-link-auto-contrast: #ffffff;
    --colour-link-auto-contrast-hover: #ffffff;
    --colour-portal-tabs-text: var(--colour-accent);
    --colour-alert: #dc2626;
    --colour-success: #16a34a;
    --colour-notice-background: #fef3e8;
    --colour-notice: var(--colour-accent);
    --colour-question: #f3f4f6;
    --colour-orange: var(--colour-accent);

    /* Separation & borders */
    --colour-separation-lines: #e4e4e7;
    --default-border-colour: #e4e4e7;
    --default-box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.05), 
        0 2px 12px rgba(0, 0, 0, 0.07);
    --default-box-shadow-small: var(--kikaron-shadow-small);
    --default-box-shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.10);
    --soft-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    --border-radii: 20px;
    --border-radii-medium: 10px;
    --border-radii-small: 6px;
    /* Cloud dashboard card titles: NORMAL weight in the serif display
       face — the only Pagella webfont shipped is the 700 face, so a
       bold-inheriting h1 rendered heavy everywhere and devices without
       local Pagella (iPad) had no lighter face to fall to. Palatino
       (built into iOS/macOS, the face Pagella clones) anchors the
       fallback; same voice as the Ink theme's approved look. */
    --kik-cloud-card-title-font-family: 'TeX Gyre Pagella', 'Bellefair', 'Noto Naskh Arabic', Palatino, Georgia, serif;
    --kik-cloud-card-title-font-weight: normal;
    --colour-app-space-shadow: rgba(31, 41, 55, 0.08);
    --caret-colour: var(--colour-accent);

    /* Global header — white with dark icons/text */
    /* --global-header-box-shadow-size: 0 1px 0; */
    --global-header-box-shadow-rgba: 17, 24, 39, 0.04;
    --global-header-background-colour: #ffffff;
    --colour-header: #ffffff;
    --colour-header-elements: #1F2937;
    --global-header-height: 53px;
    @media screen and (max-width: 768px) {--global-header-height: 54px;}
    
    /* Sidebar */
    --sidebar-background-colour: #ffffff;
    --colour-sidebar-rgba-100: rgba(255, 255, 255, 1);
    --colour-sidebar-rgba-0: rgba(255, 255, 255, 0);
    --colour-sidebar-extras: rgba(234, 108, 26, 0.06);
    --colour-sidebar-extras-hover: rgba(234, 108, 26, 0.12);
    --colour-sidebar-well: rgba(255, 255, 255, 0.5);
    --sidebar-extras-background-colour: rgba(0,0,0,0.065);
    --sidebar-extras-background-colour-hover: rgba(0,0,0,0.09);

    /* Wells */
    --pat-well-background-colour: --tile-background-colour: var(255, 255, 255, 0.5);
    --pat-well-box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.05), 
        0 2px 12px rgba(0, 0, 0, 0.07);
    --pat-well-form-field-background-colour: #fafafa;

    /* Login panel */
    --login-panel-panel-background-colour: #ffffff;
    --login-panel-panel-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    --colour-login-input-background: #ffffff;
    /* The Kikaron wordmark logo above the login fields. NOTE: a url() inside a
       custom property resolves relative to the sheet that USES the var — here the
       shared assets/main/style/all.css .splash rule — not this brand sheet. So the
       path must climb back out of main/style/ into brands/, exactly like every
       other brand does (otherwise it 404s at /assets/main/style/media/logo.svg). */
    --login-panel-logo-image: url('../../brands/kikaron/style/media/logo.svg');
    --login-panel-logo-size: contain;
    --login-panel-logo-position: center;
    /* 50px = the 84px design height reduced 40%. At <=57px the wordmark (aspect
       4.53:1) is height-bound on both the narrow phone panel and the wide desktop
       one, so it renders at a consistent ~227x50 everywhere. */
    --login-panel-logo-height: 50px;

    /* Tabs bar — white header, dark icons */
    --tabs-bar-tab-box-shadow-active: inset 0 0 0 1px rgba(31, 41, 55, 0.15);
    --tabs-bar-tab-background-colour-dimmed: #f5f5f1;
    --tabs-bar-tab-background-colour-dimmed-hover: #f9f9f8;

    /* --tabs-bar-tab-box-shadow-dimmed: inset 0 0 0 1px rgba(31, 41, 55, 0.08);
    --tabs-bar-tab-icon-background-colour: rgba(31, 41, 55, 0.06);
    --tabs-bar-tab-app-icon-filter-dimmed: invert(40%);
    --tabs-bar-tab-app-icon-filter-active: invert(0%); */

    /* Portal tabs */
    --portal-tabs-box-shadow: var(--default-box-shadow);
    --portal-tabs-title-icon-size: 28px;
    --portal-tabs-title-icon: var(--glyph-kikaron);

    /* Posts & comments */
    --colour-post: #fef3e8;
    --colour-comment-trail: #f4f4f5;
    /* --post-box-box-shadow: inset 0 0 0 1px #e4e4e7; */
    --post-background-colour: #ffffff;

    /* Application label */
    --colour-application-label: rgba(234, 108, 26, 0.1);
    --colour-application-label-text: var(--colour-accent);

    /* Workspace tiles */
    /* --colour-workspace-default: var(--colour-accent);
    --workspace-tile-text-colour: #52525b;
    --workspace-tile-title-text-colour: #1a1a1a;
    --workspace-tile-description-text-colour: #52525b;
    --workspace-tile-tag-cloud-tag-text-colour: #52525b;
    --workspace-tile-tag-cloud-tag-background-colour: #f4f4f5; */
    --workspace-tile-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    --workspace-tile-box-shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.10);
    --workspace-tile-title-font-family: 'TeX Gyre Pagella', 'Bellefair', 'Noto Naskh Arabic', serif;
    --workspace-tile-title-margin-top: 0.5rem;
    --workspace-tile-description-margin: 0.2rem 0 0 0;

    --workspace-name-font-family: 'TeX Gyre Pagella', 'Bellefair', 'Noto Naskh Arabic', serif;
    --workspace-name-font-weight: normal;

    /* App tiles */
    --tile-box-shadow: var(--default-box-shadow);
    /* --tile-box-shadow-portlet: 0 4px 24px rgba(0, 0, 0, 0.09); */
    /* White → Kikaron accent #EA6C1A. brightness(0) forces the source to
       solid black, then sepia + saturate + hue-rotate + brightness + contrast
       lands us on the target orange. */
    /* --tile-icon-filter: brightness(0) saturate(100%) invert(41%) sepia(79%) saturate(414%) hue-rotate(340deg) brightness(105%) contrast(132%); */
    --tile-background-colour: white;
    --tile-calendar-text-colour: #1a1a1a; 
    --external-app-colour: #1F2937;
    --app-tile-background-colour: white;
    --app-tile-border: none;
    /* Item selector (contact bars, member lists, file lists) */
    /* --item-selector-hover-colour: #fef3e8;*/
    /* --item-selector-byline-colour: #52525b; */
    --item-selector-icon-background-colour: rgba(0, 0, 0, 0.09);
    --item-selector-hover-colour: rgba(0, 0, 0, 0.09);

    /* File-type icon colours (pat-link-list + item-selector glyphs) */
    --colour-file-icon-word: #2b579a;        /* Word blue */
    --colour-file-icon-excel: #217346;       /* Excel green */
    --colour-file-icon-powerpoint: #c43e1c;  /* PowerPoint orange-red */
    --colour-file-icon-pdf: #e5252a;         /* Acrobat red */
    --colour-file-icon-markdown: #B8860B;    /* Notes dark goldenrod (matches Notes app colour) */
    --colour-file-icon-text: #B8860B;        /* Notes goldenrod — text-document glyph (icon-doc-text: markdown notes + rich docs) */
    --colour-file-icon-folder: #cc7722;      /* Folder ochre */
    --colour-file-icon-audio: #f57c00;       /* Audio orange */
    --colour-file-icon-image: #43a047;       /* Image green */
    --colour-file-icon-video: #1976d2;       /* Video blue */
    --colour-file-icon-diagram: #005597;     /* Diagram blue */
    --colour-file-icon-chokhmah: #7C5A3E;    /* Chokhmah brown (scripture passages) */
    --colour-file-icon-news-article: #FA2D48; /* Newsletter red (journal articles) */

    /* Modals */
    --modal-panel-panel-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);

    /* Contact bars */
    --contact-bars-background-colour: #ffffff;

    /* Forms */
    --colour-form-fields-background: #FAFAF8;
    --pat-form-panel-background-colour: #ffffff;
    --pat-form-input-field-background-colour: #FAFAF8;
    --pat-form-input-field-box-shadow: inset 0 0 0 1px #e4e4e7;
    --pat-form-input-field-box-shadow-focus: inset 0 0 0 2px var(--colour-accent);
    --pat-form-input-field-outline-focus: 2px solid rgba(234, 108, 26, 0.2);
    --pat-form-input-field-text-colour: #1a1a1a;
    --pat-select-box-background-colour: #ffffff;
    --pat-select-box-background-colour-hover: #fef3e8;
    --pat-select-box-arrow-text-colour-hover: var(--pat-button-text-colour-hover);
    --pat-select-box-arrow-width: 25px;
    --pat-select-box-arrow-background-colour: transparent;
    --pat-select-box-arrow-justify-glyph: start;
    --pat-form-placeholder-colour: #a1a1aa80;

    --event-card-background-colour: #ffffff;
    --contact-card-text-colour: #1a1a1a;

    /* Buttons */
    --colour-button: var(--colour-kikaron-light);
    --colour-button-text: #1F2937;
    --button-background-colour:  rgba(0,0,0,0.07);
    --button-background-colour-hover:  rgba(0,0,0,0.09);
    --button-background-colour-default: var(--colour-accent);
    --button-background-colour-default-hover: #F4924A;
    --pat-button-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    --pat-button-text-colour: #1F2937;
    --pat-button-text-colour-hover: #1F2937;
    --pat-button-background-colour: var(--button-background-colour);
    --pat-button-background-colour-hover: var(--button-background-colour-hover);

    /* Button cluster */
    --pat-button-cluster-box-shadow:  var(--pat-button-box-shadow);
    --pat-button-cluster-box-background: var(--colour-kikaron-light);
    /* --pat-button-cluster-box-shadow: none; */
    /* --pat-button-cluster-text-colour: #52525b; */
    /* --pat-button-cluster-item-background-colour-active: #fef3e8;  */

    /* Toolbar */
    /* --pat-toolbar-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); */
    /* --pat-toolbar-icon-text-colour: #52525b; */
    /* --pat-toolbar-button-text-colour: #52525b; */
    /* --pat-toolbar-button-background-colour: #ffffff; */
    /* --pat-toolbar-button-background-colour-hover: #fef3e8; */
    /* --pat-toolbar-icon-background-colour-hover: #fef3e8; */
    /* --pat-toolbar-search-field-input-field-box-shadow-focus: inset 0 0 0 2px var(--colour-accent); */
    /* --pat-toolbar-icon-text-colour-hover: var(--colour-accent); */
    /* --pat-toolbar-button-text-colour-hover: var(--colour-accent);  */
    --pat-toolbar-icon-background-colour: rgba(0,0,0,0.07);
    /* Toolbar icon HOVER. The non-accent toolbar icons paint the house frosted
     * base (--pat-toolbar-icon-frost-background, ~80% white) via
     * components/toolbar.css; the :hover there REPLACES that background with
     * this variable. It must therefore stay LIGHT and mostly opaque, or a
     * toolbar floating over dark media (e.g. the Photos photo/video detail page
     * over near-black footage) turns the icon "extremely dark" on hover, and a
     * transparent value also drops the pill entirely so hover reads as no
     * feedback at all. A warm, slightly-more-opaque accent-tinted frost stays
     * legible over any backdrop AND reads as a clear, on-brand hover shift from
     * the plain white rest. (Was rgba(0,0,0,0.09) — a dark wash that inverted
     * to black over dark media — then briefly transparent — invisible.) */
    /* --pat-toolbar-icon-background-colour-hover: rgba(0,0,0,0.09); */
    --pat-toolbar-icon-background-colour-hover: color-mix(in srgb, var(--colour-accent) 20%, rgba(255, 255, 255, 0.94));

    /* #20 frosted glass: every toolbar item (icon buttons, .pat-button, */
    /* .pat-select, the search field, the filter menu trigger), the */
    /* toolbar's own bumpy backdrop panel and the Messages chat composer */
    /* all share this one filter + a translucent button background, so */
    /* buttons stay legible whether the page behind is a plain colour */
    /* (Notes/Drive), a photo (Photos) or a mixed light/dark image. The */
    /* solid --pat-button-text-colour above stays legible against the */
    /* blurred/brightened backdrop this produces. */
    --pat-toolbar-button-backdrop-filter: blur(8px) saturate(1.8) brightness(1.15);
    --pat-toolbar-button-background-colour: color-mix(in srgb, var(--colour-base-background) 55%, transparent);
    --pat-toolbar-button-background-colour-hover: color-mix(in srgb, var(--colour-base-background) 70%, transparent);

    /* Magazine */
    /* --magazine-box-shadow: var(--default-box-shadow); */

    /* Workspace tabs */
    /* --colour-workspace-tabs-bar: #f4f4f5;
    --workspace-tabs-tab-text-colour: #52525b;
    --workspace-tabs-tab-background-colour-active: var(--colour-accent);
    --workspace-name-border: 1px solid #e4e4e7; */

    /* Portlet */
    --portlet-title-font-weight: 600;

    /* Tables */
    --pat-table-row-outline: 1px solid rgaba(0, 0, 0, 0.05);
    --pat-table-cell-background-colour: rgba(255, 255, 255, 0.7);

    /* Checklists */
    /* --checklist-label-background-colour-hover: #fef3e8; */

    /* Tooltips */
    /* --pat-tooltip-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    --pat-tooltip-arrow-border-colour: #e4e4e7;
    --pat-tooltip-background-colour: #1F2937;
    --tooltip-background-colour: #1F2937; */
    --tooltip-border-radii: 10px;

    /* Sidebar toggle */
    --sidebar-toggle-workspaces-box-shadow: var(--default-box-shadow);

    /* Ueber back button */
    /* --ueber-back-button-background-colour: #f4f4f5;
    --ueber-back-button-background-colour-hover: #fef3e8;
    --ueber-back-button-text-colour: #1F2937;
    --ueber-back-button-text-colour-hover: var(--colour-accent); */

    /* Back button (generic) */
    /* --back-button-background-colour: #f4f4f5;
    --back-button-background-colour-hover: #fef3e8; */

    /* File downloads */
    /* --file-download-border: 1px solid #e4e4e7; */

    /* Calendar */
    /* --colour-cal-weekend: #fafaf8; */

    /* Avatars */
    /* --pat-avatar-background-colour-hc: var(--colour-accent); */

    /* Scrollbar (webkit) */
    --colour-scrollbar-track: #fafaf8;
    --colour-scrollbar-thumb: #e4e4e7;

    /* Activity stream */
    /* --activity-stream-item-hover: #fef3e8; */

    /* Animation */
    --default-animation-duration: 0.2s;
}